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

【问题标题】：How to collapse a nav from the center of the page to a top navbar如何将导航从页面中心折叠到顶部导航栏
【发布时间】：2020-08-20 21:40:45
【问题描述】：

如何将我的导航链接放在跨越页面下方的大图像的 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>

【问题讨论】：

有人知道吗？我仍在尝试确定是否可能...
如果我理解正确的话，当屏幕很宽时，您需要在图像下方有一个大而宽的导航栏，而当屏幕很窄时，您需要在图像上方有一个狭窄的折叠导航栏。您需要两个根据视口大小隐藏/显示自己的 NavBar。
谢谢，是的，这就是我想要发生的事情。我该怎么做你所描述的？

标签： bootstrap-4 navbar nav collapse

【解决方案1】：

使用显示助手：

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

要隐藏元素，只需将 .d-none 类或 .d-{sm,md,lg,xl}-none 类之一用于任何响应式屏幕变化。

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

【讨论】：

很有趣，谢谢！因为导航栏只显示在 sm 上，我不只需要那个吗？
但是你说你想让导航栏移动位置。那不可能发生。因此，您需要两个导航栏并根据需要隐藏/显示它们，使它们看起来好像移动了一样。