2015-11-29 3 views
0

Я использую кнопку перезагрузки navbar-toggle, и когда я нажимаю на нее, содержимое остается скрытым следующим div, я пытаюсь исправить это, но я не могу см. ошибку.navbar-toggle содержимое бутстрапа скрыто другим div

Вы увидите, что у меня есть два div.row. Второй div.row - это hidding содержимого div id = "navbar1", который является целью кнопки навигации на навигаторе.

<div class="container-fluid"> 

    <div class="row">            
    <nav class="navbar navbar-default" style="height:75px;"> 
     <div class="container-fluid"> 
     <div class="navbar-header">        
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> 
      <span class="sr-only">Menu</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand"><img src="zzlogo.png"></a> 
     </div> 
     <div class="collapse navbar-collapse" id="navbar1"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Nosotros <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Desarrolladores</a></li> 
       <li><a href="#">Trayectoria</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Productos <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Abarrotes</a></li> 
       <li><a href="#">Frutas y Verduras</a></li> 
       <li><a href="#">Carnes</a></li> 
       <li><a href="#">Lácteos</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Contacto</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    </div> 


<!-- THIS DIV IS NOT MOVING WHEN I CLICK ON THE NAVBAR-TOGGLE BUTTON --> 

    <div class="row"> 
    <nav class="navbar navbar-inverse"> 
     <div class="container"> 
     <div class="navbar-header col-xs-5 col-sm-4 col-md-3 col-lg-3"> 
      <a href="#" class="navbar-brand">Administración</a> 
     </div> 
     <div class="col-xs-7 col-sm-8 col-md-9 col-lg-9"> 
      <ul class="nav navbar-nav"> 
      <li ><a href="#">Usuarios</a></li> 
      <li ><a href="#">Productos</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    </div> 
</div> 

Извините за мой плохой английский и спасибо.

+0

Вместо описания того, что происходит, что не следует пытаться объяснить, что вы собираетесь бывает. Я не понимаю, чего вы пытаетесь достичь. – turbopipp

ответ

3

Проблема вызвана объявлением высоты для navbar (высота: 75 пикселей). По умолчанию это min-height: 50px, поэтому, когда окно просмотра находится под 768px, навигационная панель не может расширить отображение фона как «невидимого», если вы это сделаете.

Чтобы увеличить высоту, вы можете использовать padding.

См. Рабочие примеры.

Пример 1

.navbar.navbar-top { 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    margin-bottom: 0; 
 
    border-radius: 0; 
 
} 
 
.navbar.navbar-bottom { 
 
    border-radius: 0; 
 
} 
 
.navbar-top .navbar-brand { 
 
    padding-top: 0; 
 
    margin-top: -12px; 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar-top .navbar-collapse { 
 
    margin-top: 20px; 
 
    margin-bottom: -20px; 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
     <a href="#" class="navbar-brand"> 
 
     <img src="http://placehold.it/150x75/f00"> 
 
     </a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Nosotros <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Desarrolladores</a> 
 

 
      </li> 
 
      <li><a href="#">Trayectoria</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Productos <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Abarrotes</a> 
 

 
      </li> 
 
      <li><a href="#">Frutas y Verduras</a> 
 

 
      </li> 
 
      <li><a href="#">Carnes</a> 
 

 
      </li> 
 
      <li><a href="#">Lácteos</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Contacto</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<nav class="navbar navbar-inverse navbar-bottom"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2"> <span class="sr-only">Menu</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> <a href="#" class="navbar-brand">Administración</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar2"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Usuarios</a> 
 

 
     </li> 
 
     <li><a href="#">Productos</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Пример 2

.navbar.navbar-top { 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    margin-bottom: 0; 
 
    border-radius: 0; 
 
} 
 
.navbar.navbar-bottom { 
 
    border-radius: 0; 
 
} 
 
.navbar.navbar-bottom a { 
 
    margin: 0 5px; 
 
} 
 
.navbar-top .navbar-brand { 
 
    padding-top: 0; 
 
    margin-top: -12px; 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar-top .navbar-collapse { 
 
    margin-top: 20px; 
 
    margin-bottom: -20px; 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default navbar-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
     <a href="#" class="navbar-brand"> 
 
     <img src="http://placehold.it/150x75/f00"> 
 
     </a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Nosotros <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Desarrolladores</a> 
 

 
      </li> 
 
      <li><a href="#">Trayectoria</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Productos <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Abarrotes</a> 
 

 
      </li> 
 
      <li><a href="#">Frutas y Verduras</a> 
 

 
      </li> 
 
      <li><a href="#">Carnes</a> 
 

 
      </li> 
 
      <li><a href="#">Lácteos</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Contacto</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<nav class="navbar navbar-inverse navbar-bottom"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> <a href="#" class="navbar-brand">Administración</a> 
 

 
     <p class="navbar-text"> <a href="#" class="navbar-link">Usuarios</a> <a href="#" class="navbar-link">Productos</a> 
 

 
     </p> 
 
    </div> 
 
    </div> 
 
</nav>

+0

Большое вам спасибо и за два примера. –

+0

Добро пожаловать и рад, что я могу помочь. – vanburen

Смежные вопросы