Bootstrap 4 响应式导航栏可折叠按钮答案

【问题标题】：Bootstrap 4 responsive navbar collapsible buttonBootstrap 4 响应式导航栏可折叠按钮
【发布时间】：2018-02-21 08:29:25
【问题描述】：

我正在尝试使用 bootstrap 4 编写导航栏，它将在 xs 及以下屏幕尺寸中显示可折叠按钮。我实现了这一点，但是当单击按钮时，导航链接将按钮和品牌名称向下推，并出现在它们上方的导航栏中。我希望它们出现在导航栏下方。

谁能帮我解决这个问题？

    <header>
        <nav class="navbar navbar-default">
        <div class="container-fluid bg-light ">
        <div class="navbar-brand">
          <a id="dominik" href="index.html"><h1>Food, LLC</h1></a>
        </div>

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-light p-4">
     </div>


           <ul id="nav-list" class="nav navbar-nav navbar-collapse">
            <li class="nav-item active">
              <a class="nav-link" href="#">
                <br>Chicken</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <br>Beef</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <br>Sushi</a>
            </li>
            </ul><!-- #nav-list -->


  </div>
  <nav class="navbar navbar-light bg-light d-sm-none">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>

【问题讨论】：

标签： css twitter-bootstrap button navbar responsive

【解决方案1】：

您没有像在Official Bootstrap Documentation 中那样做navbar，此外，您将两个nav 放在彼此内部，这在他们的文档中没有提到。

您可以轻松地从文档中复制navbar 代码，然后随意更改URLs 的名称。

检查此jsfiddle。

【讨论】：

【解决方案2】：

用这个更新代码

    <header>
        <nav class="navbar navbar-default">
        <div class="container-fluid bg-light ">
        <div class="navbar-brand">
          <a id="dominik" href="index.html"><h1>Food, LLC</h1></a>
        </div>

  <nav class="navbar navbar-light bg-light d-sm-none">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-light p-4">
     </div>


           <ul id="nav-list" class="nav navbar-nav navbar-collapse">
            <li class="nav-item active">
              <a class="nav-link" href="#">
                <br>Chicken</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <br>Beef</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <br>Sushi</a>
            </li>
            </ul><!-- #nav-list -->


  </div>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>

【讨论】：