在Bootstrap3中沒有顯示漢堡菜單

Question

我使用nav和nav-bar在Bootstrap3。

<div id="gnav" class="col-xs-9 col-sm-9 col-md-9 col-lg-9"> 
    <nav class="navbar navbar-default" id="" > 
     <div class="collapse navbar-collapse" id=""> 
      <ul class="nav navbar-nav"> 

我可以防止在小設備寬度上顯示漢堡包菜單嗎？

除了菜單之外，我想顯示家庭，項目，聯繫人等文本，就像在桌面視圖中一樣。

Here’s一個我不想要的行爲的例子。

Answer 1

試試這個：

檢查演示HERE

HTML：

<nav class="navbar"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 

     <a class="navbar-brand" href="#">Brand</a> 
    </div> 


    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only ">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
     </ul> 
     </li> 
    </ul> 


    </div> 
    <!-- /.container-fluid --> 
</nav> 

CSS：

.nav::after, 
.nav::before, 
.navbar-header::after, 
.navbar::after { 
    display: table-caption; 
} 

.nav.navbar-nav li, 
.nav.navbar-nav li a { 
    display: inline-block; 
} 
.navbar-nav .open .dropdown-menu { 
    position: absolute; 
    background-color: #fff; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-radius: 4px; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); 
}