防止bootstrap导航栏调整大小

Question

我使用了以下bootstrap导航栏...

<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>

我对此导航栏的问题是，当屏幕变小时，导航栏会改变其排列方式

调整大小之前......

调整大小后......

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

Answer 1

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

tMySqlInput--main-->tHashOutput
    |
 onSubjobOK
    |
tFixedFlowInput--main-->tHashOutput
    |
 onSubjobOK
    |
tHashInput--main-->tFileOuputDelimtited

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

<ul class="nav navbar-nav">

之后非常简单，我将每个<ul class="nav"> 左移，以便它们水平对齐。然后我将它们全部放在一个固定宽度的div中，以防止它们坍塌。

Answer 2

打开您的调试工具，您可以看到有许多媒体查询sum样式规则，这些规则仅在屏幕宽度大于768px时才有效。因此，当您调整屏幕大小时，导航栏样式会发生变化。

如果您想在所有屏幕尺寸上保留样式，只需修改这些媒体查询，使这些样式规则适用于所有屏幕尺寸。