防止引导程序导航栏调整大小 [英] Prevent bootstrap navbar from resizing

问题描述

 < nav class =navbar navbar-inverse> 
< div class =container-fluid> 
< div class =navbar-header> 
< a class =navbar-brandhref =＃> WebSiteName< / a> 
< / div> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>主页< / a>< / li> 
< li class =dropdown>< a class =dropdown-toggledata-toggle =dropdownhref =＃> Page 1< span class =caret> < /跨度>< / A> 
< ul class =dropdown-menu> 
< li>< a href =＃>页面1-1< / a>< / li> 
< li>< a href =＃>第1-2页< / a>< / li> 
< li>< a href =＃>第1-3页< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃> Page 2< / a>< / li> 
< li>< a href =＃>第3页< / a>< / li> 
< / ul> 
< / div> 
< / nav> 
  

我用这个导航栏的问题是当屏幕变小时，导航栏会改变它的安排方式

在调整大小之前...

调整大小...

如何防止引导程序重新安排导航栏？我应该添加/删除哪些属性以确保总是看起来像第一张照片。溢出是允许的，我只需要确保它保持其形状。

解决方案

我弄明白了，我改变了......

 < ul class =nav navbar-nav> 
  

...以一个普通的ul而不是一个预先定义的bootstrap，所以我将它改为...

 < ul class =nav> 
  

之后，它非常简单，我将每个 ul 离开，这样它们将水平对齐。然后我把它们放在一个固定宽度的div里面，以防止它们折叠。

I took the following bootstrap navbar...

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

The problem I have with this navbar is that when the screen is made smaller, the nav bar changes the way it is arranged

Before resize...

After resize...

How do I prevent bootstrap from re-arranging the nav bar? What attributes should I add/delete to ensure is always looks like the first picture. Overflow is allowed, I just need to ensure it keeps its shape.

解决方案

I figure it out, I changed...

<ul class="nav navbar-nav">

...to a regular ul instead of one pre-define by bootstrap, so I changed it to...

<ul class="nav">

after that it was pretty simple, I floated each ul left so that they would be aligned horizontally. Then I placed them all inside a div with a fixed width to prevent them from collapsing.

这篇关于防止引导程序导航栏调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！