CSS: Как исправить перекрывающиеся divs

Question

Я использую bootstrap для создания веб-сайта. Вот код для Navbar Edit: Fiddle http://jsfiddle.net/cb6rxu2h/

<header> 

     <nav class="navbar navbar-fixed-top navbar-inverse"> 
      <div class="container-fluid"> 
       <div class="navbar-header col-md-4 col-sm-12"> 
        <a class="navbar-brand" href="#">BargainKart</a> 
       </div> 

        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="#"><span class="badge pull-right">4</span><i class="fa fa-shopping-cart"></i> 
         </a></li> 
         <li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in"></i> 
          Sign in</a></li> 

         </ul> 

        </div> <!--container fluid--> 
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
         <ul class="nav navbar-nav pull-right"> 
          <li><a href="#">About</a></li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Categories <span class="caret"></span></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Electronics</a></li> 
            <li><a href="#">Fashion</a></li> 
            <li role="separator" class="divider"></li> 
            <li><a href="#">All</a></li> 
           </ul> 
          </li> 
         </ul> 
         <div class="col-sm-6 col-md-3 pull-right"> 
          <form class="navbar-form" role="search"> 
           <div class="input-group"> 
            <input type="text" class="form-control" placeholder="Search" name="q"> 
            <div class="input-group-btn"> 
             <button class="btn btn-default" type="submit"><i class="fa fa-search"></i> 
             </button> 
            </div> 
           </div> 
           </form> 
           </div> 
          </div><!-- /.navbar-collapse --> 
        </nav> 

      </header> 

И код для боковой панели

<div class="wrapper"> 
       <aside> 
       <div class="categories-bar content-fluid col-md-3 col-sm-12"> 
        <ul class="nav nav-pills nav-stacked"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#">About</a></li><li class="active"><a href="#">Home</a></li> 
         <li><a href="#">About</a></li><li "><a href="#">Home</a></li> 

         <li><a href="#">About</a></li> <li><a href="#">Shop</a></li> 
       </ul> 
      </div> 
      </aside> 

устанавливаемыми сотовыми Я использовал это

aside { 

    padding-bottom: 5000px; 
    margin-bottom: -5000px; 
    background-color: white; 
    font-size: 1.5em; 


} 
.wrapper { 

    position: relative; 

    overflow: hidden; 

} 

Я испортил lo t, но все равно не может понять, почему боковая панель и обертка div перекрываются в заголовок. Я могу использовать прописку, но когда я масштабирую браузер, у вас мало свободного места для маленьких экранных браузеров.

Answer 1

Поскольку вы используете navbar-fixed-top, давая body, прокладка высоты navbars должна исправить эту проблему. Замените XX своим значением высоты в пикселях.

body { 
    padding-top: XXpx; 
} 

Вы можете получить этот отзыв here.