2016-03-14 141 views
1

请看看这三种图像的高度:如果所有元素融入导航栏everithingTwitter的导航栏更改时,屏幕大小

1)是确定

enter image description here

2)如果只有核心要素适合进入导航栏navabar的高度,如果页面自动

enter image description here

3)encrease变得更小的是好的

enter image description here

代码:

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <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> 
     <a class="navbar-brand" href="Default.aspx">Gestione Azienda</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <!--<li class="active"><a href="#">Link</a></li>--> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Elenco commesse<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a runat="server" href="~/elenco.aspx?societa=1">1</a></li> 
      <li><a runat="server" href="~/elenco.aspx?societa=2">2</a></li> 
      <li><a runat="server" href="~/elenco.aspx?societa=3">3</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Gestisci commessa<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a runat="server" href="~/1.aspx/#tab-1">1</a></li> 
      <li><a runat="server" href="~/2.aspx/#tab-2">2</a></li> 
      <li><a runat="server" href="~/3.aspx/#tab-3">3</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Impostazioni<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a runat="server" href="~/impostazioni.aspx">Impostazioni Generali</a></li> 
      <li><a runat="server" href="~/GestioneUtenti.aspx">Gestione utenti</a></li> 
      </ul> 
     </li> 
     <li><a id="A1" runat="server" href="~/ProgLavori.aspx" target="_blank">Programmazione lavori</a></li> 
     <li><a runat="server" href="http://" target="_blank">Posta</a></li> 
     <li><a id="menu_logout" runat="server" onserverclick="logout">Logout</a></li> 
     <li><a id="menu_login" runat="server" href="~/Default.aspx">Login</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

在这里你可以找到的代码,如果你尝试调整菜单区,你可以看到我的问题。

http://jsfiddle.net/8dabnd41/

有人能帮助我吗?

回答

0

您可以禁用Bootstrap导航栏折叠。这里有一个很好的解释:Bootstrap 3 - disable navbar collapse

+0

我需要启用navbar-collapse,因为它可以适应手机屏幕。禁用它就像那个http://jsfiddle.net/bos09162/。 –

相关问题