如何将导航从页面中心折叠到顶部导航栏

Question

如何将我的导航链接放在运行跨页面的 ul 中，在大图像下方，然后将这些相同的链接移动到折叠的导航栏中，顶部有一个按钮页？我所看到的只是需要在页面顶部或侧面设置导航链接运行的选项。这是我的代码。

<body>

<img class="img-fluid" src="img/latestlogo3.png" alt="header-img">

<div class="container">

 <br>

  <ul class="nav justify-content-center">
    <li class="nav-item ml-3 mr-3">
      <a class="nav-link" href="#">Who is Gustav Mahler?</a>
    </li>
     <li class="nav-item ml-3 mr-3">
      <a class="nav-link" href="#">EPISODES</a>
    </li>
    <li class="nav-item ml-3 mr-3">
      <a class="nav-link" href="#">ABOUT</a>
    </li>
    <li class="nav-item ml-3 mr-3">
      <a class="nav-link" href="#">CONTACT</a>
    </li>
  </ul>

 <hr>

 <br>

 <div class="row">
    <div class="col-sm mb-4 center-block">
        <img src="img/episode.png" class="img-fluid"/>  
    </div>
    <div class="col-sm mb-4 center-block">
        <img src="img/episode.png" class="img-fluid"/>
    </div>
</div>

</body>

Answer 1

使用显示助手：

https://getbootstrap.com/docs/4.3/utilities/display/

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

所以您需要两个导航栏，一个响应大尺寸，另一个响应小尺寸。

如何将导航从页面中心折叠到顶部导航栏

How to collapse a nav from the center of the page to a top navbar

bootstrap-4

navbar

nav

collapse