Fatal编程技术网
  • html/
  • Html 基于Bootstrap的版图设计

Html 基于Bootstrap的版图设计

html twitter-bootstrap

Html 基于Bootstrap的版图设计,html,twitter-bootstrap,Html,Twitter Bootstrap,我最近开始使用bootstrap框架来设计网页。在其中一个网页中，我的意图是在标题最右边显示主页和注销菜单选项。当我在浏览器中检查它时，这看起来很好，但是当浏览器的宽度减小时，我看到主菜单和注销菜单消失了 任何人都不知道这是怎么发生的。 这是我正在使用的代码 <head id="Head1" runat="server"> <meta name="viewport" content="width=device-width, initial-scale=1"> &l

我最近开始使用bootstrap框架来设计网页。在其中一个网页中，我的意图是在标题最右边显示主页和注销菜单选项。当我在浏览器中检查它时，这看起来很好，但是当浏览器的宽度减小时，我看到主菜单和注销菜单消失了

任何人都不知道这是怎么发生的。 这是我正在使用的代码

<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>
正如@deceze在评论中所说，这是一个明确的特征

要去掉它，简单的改变

<div class="navbar-collapse collapse">
到

JsFiddle：

调整输出窗格的大小以获得完全效果 将您的代码粘贴到其中，按run，然后调整输出窗格的大小，使其完全消失
至少这在小提琴的配置上是有效的。

Please RTFM，这是一个明确的特征：这个缩进看起来像环法自行车赛的一步…@zessx sheesh！你他妈的是对的它是：D 
<div class="navbar">