防止引导导航栏调整大小

Question

我采用了以下引导导航栏...

<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

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

<ul class="nav navbar-nav">

...改为常规 ul，而不是 bootstrap 预定义的，所以我将其更改为...

<ul class="nav">

之后就非常简单了，我将每个

ul

向左浮动，以便它们水平对齐。然后我将它们全部放在一个固定宽度的 div 内，以防止它们折叠。

Answer 2

打开调试工具你可以看到有很多媒体查询

@media (min-width: 768px)

样式规则，这些规则仅在屏幕宽度大于768px时有效。因此，当您调整屏幕尺寸时，导航栏样式会发生变化。

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

Answer 3

style="max-width: 100vw;"