导航栏项目扩展了1行，它会更改为..下拉

Question

我正在使用bootstrap构建导航栏。我已经审查了引导程序内容，但是当内容大于1行时，导航中找不到一个位置，右侧的项目变成...

<header class="navbar navbar-static-top">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>
    </ul>
  </div>
</header>

它显示：

（边缘屏幕）项目1项目2项目3项目4项目5（边缘屏幕）

（边缘屏幕）项目6

我正在寻找的是：

（边缘屏幕）项目1项目2项目3项目4 ...（边缘屏幕）

在...下拉下显示项目5和项目6。

当它到达小屏幕时，它是一个下拉菜单。

---

每当导航物品到达右侧时，将其扔进下拉菜单中。

例如，我的屏幕看到此页面为宽度1903，但是如果我使屏幕稍小一点：1841，如果nav项目撞到了该墙，则它将掉落到下一个级别，从而导致该页面的其余部分被扔掉。我希望它可以进入下拉菜单。

Answer 1

处理此类情况 bootstrap使用@Media查询以具有响应设计适用于所有屏幕尺寸。我有示例媒体查询以下查看肯定会帮助您。

更改显示的大小，然后您会注意到CSS更改 自动根据显示的大小。

您可以在页面中更改CSS。

@media screen and (max-width: 1200px) {
  body{
    background-color: brown;
  }
  .design {
    background-color: white;
  }
}
@media screen and (max-width: 700px) {
  body{
    background-color: green;
  }
  .design {
    background-color: red;
  }
}
@media screen and (max-width: 450px) {
  body{
    background-color: blue;
  }
  .design {
    background-color: green;
  }
}
@media screen and (max-width: 300px) {
  body{
    background-color: red;
  }
  .design {
    background-color: blue;
  }
}

<div class="design">
This is a smaple div
</div>