css - 导航栏未隐藏在移动屏幕上

Question

当屏幕尺寸变为移动时，我无法让导航栏隐藏，谁能看到我做错了什么。我正在使用 Bootstrap 4。

<!-- NAVBAR -->

<div class="container-fluid">
  <nav class="mynavbar navbar navbar-expand-lg navbar-light">
    <a class="mynav" href="index.html">Bristol Plumber 24-7<small>Heating and Plumbing Expert</small></a>
    <a class="icon mr-auto" href="tel:+447415375875"><i class="fas fa-mobile-alt"></i></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="d-flex flex-row-reverse collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav ">
        <a class="nav-item nav-link" href="heating.html">heating</a>
        <a class="nav-item nav-link" href="plumbing.html">plumbing</a>
        <a class="nav-item nav-link" href="drainage.html">Drainage</a>
        <a class="nav-item nav-link" href="contactus.html">Contact us</a>
      </div>
    </div>
  </nav>
</div>

<!-- NAVBAR END -->

如何使用 bootstrap 4 将其移动到 NavBar 的右侧

<div class="collapse navbar-collapse justify" id="navbarNavAltMarkup">
  <div class="navbar-nav ">
    <a class="nav-item nav-link" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link" href="#">Disabled</a>
  </div>
</div>

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ">
    <a class="nav-item nav-link" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link" href="#">Disabled</a>
  </div>
</div>

Answer 1

d-flex (display:flex) 覆盖了使移动导航始终显示的 navbar-collapse 类。

<div class="container-fluid">
    <nav class="mynavbar navbar navbar-expand-lg navbar-light">
        <a class="mynav" href="index.html">Bristol Plumber 24-7<small>Heating and Plumbing Expert</small></a>
        <a class="icon mr-auto" href="tel:+447415375875"><i class="fas fa-mobile-alt"></i></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="flex-row-reverse collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ">
                <a class="nav-item nav-link" href="heating.html">heating</a>
                <a class="nav-item nav-link" href="plumbing.html">plumbing</a>
                <a class="nav-item nav-link" href="drainage.html">Drainage</a>
                <a class="nav-item nav-link" href="contactus.html">Contact us</a>
            </div>
        </div>
    </nav>
</div>

https://www.codeply.com/go/AyvXEUmPJH

将 Navbar 元素右对齐有 already been answered before

只需使用 ml-auto(左自动边距)将 navbar-nav 推到右边:

<div class="container-fluid">
    <nav class="mynavbar navbar navbar-expand-lg navbar-light">
        <a class="mynav" href="index.html">Bristol Plumber 24-7<small>Heating and Plumbing Expert</small></a>
        <a class="icon mr-auto" href="tel:+447415375875"><i class="fas fa-mobile-alt"></i></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ml-auto">
                <a class="nav-item nav-link" href="heating.html">heating</a>
                <a class="nav-item nav-link" href="plumbing.html">plumbing</a>
                <a class="nav-item nav-link" href="drainage.html">Drainage</a>
                <a class="nav-item nav-link" href="contactus.html">Contact us</a>
            </div>
        </div>
    </nav>
</div>