Question

使用此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>

当浏览器窗口宽760px时，导航菜单看起来很好：

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

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

谢谢！

Answer 1

Bootstrap4设计为首先使用flex进行移动。

开始时flex-direction: column;已开启，但当您超过992像素时，它会变为flex-direction: row;

你所追求的。

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

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

Answer 2

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

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

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

Bootstrap 4不使用汉堡包菜单，也不会折叠导航

2 个答案: