使用引導程序的佈局設計

我最近開始使用引導程序框架來設計網頁。在其中一個網頁上，我的目的是在標題的最右側顯示首頁和註銷菜單選項。當我在瀏覽器中查看時，這看起來很好，但當瀏覽器寬度減小時，我發現菜單（Home和Logout）消失。使用引導程序的佈局設計

任何機構都不知道這是如何發生的。這是我正在使用的代碼。

<head id="Head1" runat="server"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> 
    <link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <form id="Form1" runat="server"> 
    <div class="container-fluid"> 
     <div class="row" style="background-color: #00509F; color: #FFFFFF"> 
     <div class="col-md-10 col-xs-4"> 
      <h1>Page Title</h1> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div>  
     <div class="col-md-2" style="text-align: right"> 
      <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right">    
       <li><a href="UserLogin.aspx" style="color: #FFFFFF">Home</a></li> 
       <li><a href="UserLogin.aspx" style="color: #FFFFFF">Logout</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-md-2" style="padding-left: 5px"> 
      <asp:Menu ID="mnuMainMenu" runat="server" cssclass="menu" > 
      <Items> 
       <asp:MenuItem Text="Menu Item1" Value="Menu Item1"  NavigateUrl="~/Page1.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item2" Value="Menu Item2" NavigateUrl="~/Page2.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item3" Value="Menu Item3" NavigateUrl="~/Page3.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item4" Value="Menu Item4" NavigateUrl="~/Page4.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item5" Value="Menu Item5" NavigateUrl="~/Page5.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item6" Value="Menu Item6" NavigateUrl="~/Page6.aspx"></asp:MenuItem> 
       <asp:MenuItem Text="Menu Item7" Value="Menu Item7" NavigateUrl="~/Page7.aspx"></asp:MenuItem> 
      </Items> 
      </asp:Menu> 
     </div> 
     <div class="clearfix visible-xs"></div> 
     <div class="col-md-10 col-xs-12 col-sm-12 " >  
      This is the place for Main content   
     </div> 
     </div> 
    </div> 
    </form>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> 
    <script src="Scripts/bootstrap.min.js" type="text/javascript"></script> 
</body> 
</html>

來源

2014-07-18 sahaneru

請RTFM，這是一個明確的功能：http://getbootstrap.com/components/#navbar – deceze

這個縮進看起來像環法自行車賽的一步... – zessx

@zessx sheesh！你真的是該死的：D – Ranveer

正如@deceze在評論中說的那樣，這是一個明確的特徵。

要刪除它，簡單的更改;

<div class="navbar-collapse collapse">

要

<div class="navbar">

的jsfiddle：http://jsfiddle.net/zLDQv/

調整輸出窗格中充分發揮作用
粘貼在那裏，你的代碼後，按運行，並調整輸出窗格中全消失的效果

至少這對小提琴的配置有效。

來源

2014-07-18 13:43:46

使用引導程序的佈局設計

回答

相關問題