navbar-toggle bootstrap內容被另一個div隱藏

Question

我使用的是引導navbar切換按鈕，當我點擊它，內容保持隱藏的下一個div，我試圖修復它，但我不能看到錯誤。

你會看到我有兩個div.row。第二個div.row隱藏了div id =「navbar1」的內容，這是navbar切換按鈕的目標。

<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> 

對不起，我的英語不好，謝謝。

Answer 1

該問題是由於爲navbar（高度：75px）聲明高度而導致的。它的默認值是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>