Question

我只需要我的Bootstrap 4导航栏就无法使用toggler响应。

见这里：https://jsbin.com/kayagez/edit?html,output

我在大屏幕上有这个：

我只需要保持它也像移动视图一样。但 而不是我 ：

我需要的是Navbar品牌右侧的导航栏。 overflow: hidden我无法看到右边的内容对我来说没问题。

如何？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Bug Report</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>

    <div class="home" style="padding-top:100px">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>

        <ul class="navbar-nav ml-auto" style="flex-direction: row;">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Other</a>
          </li>
        </ul>
      </nav>
    </div>

    <!-- jQuery and Bootstrap JavaScript-->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  </body>
</html>

Answer 1

将.navbar flex-wrap: wrap;属性更改为nowrap。

.navbar {
    flex-wrap: nowrap;
}

Bootstrap 4 - Navbar mobile让它没有响应，一行，没有环绕

1 个答案: