Question

当屏幕尺寸移动时，我无法隐藏导航栏，任何人都可以看到我做错了什么。我正在使用引导程序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 -->

如何使用引导程序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（左侧自动边距）将导航栏导航到右侧即可：

<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>

导航栏未隐藏在手机屏幕上

1 个答案: