导航栏无法正确堆叠

Question

在超小尺寸屏幕上，我想将navbar品牌和navbar-nav垂直堆叠。

<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

但是由于某种原因，它看起来像这样

如何在超小尺寸屏幕上将navbar-nav放在navbar品牌下？

Answer 1

使用.collapse类和按钮切换器。

更新

只需在您的flex-column flex-lg-row标签中添加nav类。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light flex-column flex-lg-row">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 2

您是否还希望将导航项垂直堆叠？我认为您正在寻找...

<nav class="navbar navbar-dark navbar-expand bg-primary fixed-top">
    <div class="container flex-column flex-sm-row">
        <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
        <ul class="navbar-nav mr-sm-auto mr-0">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

https://codeply.com/p/UNjoLoEnSn