Bootstrap 4不使用汉堡菜单也不折叠导航[重复]答案

【问题标题】：Bootstrap 4 do not use hamburger menu and do not collapse nav [duplicate]Bootstrap 4不使用汉堡菜单也不折叠导航[重复]
【发布时间】：2017-06-20 05:37:02
【问题描述】：

使用此 HTML：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>app</title>
    <meta name="description" content="todoApp">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container-fluid">
      <nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse fixed-top">
        <a class="navbar-brand" href="#">App</a>
        <ul class="nav navbar-nav">
          <li class="nav-item">
            <a href="#" class="nav-link">
              home
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              about
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              admin
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </body>
</html>

当浏览器窗口宽于 760 像素时，导航菜单看起来不错：

但是，当窗口宽度小于 760px 时，菜单会向下跳：

无论窗口宽度如何，保持菜单不变的正确语法是什么。另外，当窗口缩小时，我不想将菜单链接放在汉堡按钮后面。

谢谢！

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

Bootstrap4 旨在通过 flex 实现移动优先。

一开始flex-direction: column; 是打开的，但是当你超过 992px 时它变成flex-direction: row;

这就是你所追求的。

scss 文件在此处https://github.com/twbs/bootstrap/blob/v4-dev/scss/_navbar.scss 第 127 到 181 行。

您可以尝试评论第 147 和 178 行并检查是否有效。

【讨论】：

【解决方案2】：

我会尝试使用 Firebug 来检查行项目，在某处定义的断点会导致更改。 css 样式可能包含在类似于以下内容的@media 规则中：

@media screen and (max-width: 760px) {
   ul.navbar-nav li.nav-item{display: block;}
}

如果这没有帮助，请随时发布与 .nav-item 相关的 CSS。

【讨论】：