菜單無法正確隱藏在Bootstrap中的移動視圖

美好的一天，我試圖用bootstrap製作左側菜單。我用jQuery來切換菜單顯示/隱藏按鈕點擊。桌面視圖一切正常。但在移動視圖中，按鈕不在下面的圖像菜單旁邊。菜單無法正確隱藏在Bootstrap中的移動視圖

桌面視圖 Desktop View

移動視圖

Mobile View

這裏是我的代碼，

<body> 
<script src="~/Scripts/jquery-1.9.1.min.js"></script> 
<script src="~/Scripts/bootstrap.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('#nav1').hide(); 
     $('#btn1').click(function() { 
      $('#nav1').toggle("slow"); 
     }); 
    }); 
</script> 
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"><a class="navbar-brand" href="#"><b style="font-size: 1.50em">Brand Name</b><br /><span style="font-size: .50em">Brand description</span></a> 
     <button type="button" class="navbar-toggle"><span class="glyphicon glyphicon-pencil"></span> &nbsp; Register</button> 
     <button type="button" class="navbar-toggle"><span class="glyphicon glyphicon-off"></span> &nbsp; LogIn</button> 
    </div> 
    <div class="collapse navbar-collapse navbar-menubuilder"> 
     <ul class="nav navbar-nav navbar-right"> 
      <button id="btn2" class="btn btn-default"><span class="glyphicon glyphicon-off"></span> &nbsp; LogIn</button> 
      <button id="btn3" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span> &nbsp; Register</button> 
     </ul> 
    </div> 
</div> 
</div><br /><br /><br /><br /> 
    <button id="btn1" class="btn btn-default glyphicon glyphicon-home"></button> 
    <ul id="nav1" class="nav nav-pills nav-stacked col-sm-3"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">About</a></li> 
</ul> 
</body>

有什麼錯我的代碼？我如何在移動視圖中獲得與Dekstop視圖相同的內容？你的幫助將非常可觀。 TNX。

來源

2015-01-01 Shihan Khan

沒關係找到它。由於我也在處理移動視圖，因此我應該使用col-xs-3而不是col-sm-3。

<ul id="nav1" class="nav nav-pills nav-stacked col-xs-3">

來源

2015-01-01 17:41:13

菜單無法正確隱藏在Bootstrap中的移動視圖

回答

相關問題