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

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

bootstrap-4

Bootstrap 4 如何将导航从页面中心折叠到顶部导航栏,bootstrap-4,navbar,nav,collapse,Bootstrap 4,Navbar,Nav,Collapse,我怎么能让我的导航链接在一个大图像下的页面上运行，然后让这些相同的链接移动到页面顶部有按钮的折叠导航栏中？我看到的所有选项都要求导航链接在页面顶部或侧面。这是我的密码 <body> <img class="img-fluid" src="img/latestlogo3.png" alt="header-img"> <div class="container"> <br> <ul class="nav justify-conten

我怎么能让我的导航链接在一个大图像下的页面上运行，然后让这些相同的链接移动到页面顶部有按钮的折叠导航栏中？我看到的所有选项都要求导航链接在页面顶部或侧面。这是我的密码

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

使用显示辅助程序：

要隐藏元素，只需使用.d-none类或.d-{sm，md，lg，xl}-none类中的一个类来实现任何响应屏幕变化

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

有人知道这件事吗？我仍在试图弄清楚是否可能……如果我理解正确，当屏幕较宽时，您希望图像下方有一个较大的宽导航栏，但当屏幕较窄时，图像上方有一个收拢的窄导航栏。您需要两个导航栏，根据视口大小隐藏/显示它们自己。谢谢，是的，这就是我想要的。我该怎么做你所描述的？很有趣，谢谢！既然导航栏只在sm显示，我就需要一个吗？但你说你想让导航栏移动位置。这不可能发生。因此，您需要两个导航栏，并根据需要隐藏/显示它们，使它们看起来像它移动了一样。