Question

我正在使用引导程序来构建导航栏。我已经审查了引导程序的内容，但是当内容大于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，如果导航项碰到了那堵墙，则它将下降到下一层，从而导致页面的其余部分被抛弃。而不是让它进入下一个级别，我希望它进入下拉菜单。

Answer 1

要处理此类情况，引导程序使用@media查询来对所有屏幕尺寸进行响应设计。我在下面有示例媒体查询，请确认它可以为您提供帮助。

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

您可以在页面中随意更改CSS。

echo $EPOCHSECONDS

echo $EPOCHREALTIME

导航栏项目扩展到1行，下拉菜单更改为...

1 个答案: