Bootstrap 4导航栏有两行，底行可折叠

我希望2个导航栏显示在两个单独的行中，所有链接（可折叠项目）位于底部，顶部和标题和切换按钮位于顶行。

像这样：

------------------------------------------------------ ONE_________BIG_________TITLE [Toggle] ------------------------------------------------------ Nav items Icon Links Forms ... ------------------------------------------------------ 

顶行将在移动和桌面设备中展开，但切换按钮应隐藏在桌面上。 底行将在桌面上展开，并在移动设备上折叠。

通过将所有内容包装在一个div.navbar中并使用display：table定位和垂直对齐徽标/标题并相互切换，我能够在bootstrap 3中执行此操作。

仅在桌面设备中，滚动后，我希望底行固定在顶部。 我曾经在bootstrap 3中使用词缀来实现这一点，任何想法如何用新版本来做到这一点？

同样在移动设备中，未折叠的顶行应固定在顶部。

这是我的bootstrap 3代码：

 #navcollapse { top: 0; width: 100%; z-index: 10050; } @media (max-width: 767px) { #navcollapse { position: static; } } #topnavrow.affix { top: 0; width: 100%; z-index: 10050; } @media (min-width: 768px) { #topnavrow.affix { position: static; } } 

    
 
 
  _________TITLE_________  
 
  Toggle  
 
 
 
 
 
Item 1
 
Item 2
 
Item 3
 
 
 
  

这是@ZimSystem在评论中建议的代码。 因为“navbar-collapse”和“collapse”应用于导航栏内的div，所以当导航栏折叠时总会出现灰色边框。

我无法弄清楚如何在不破坏样式的情况下将其应用于父导航……

 /* only affix the top navbar on mobile */ @media (max-width: 768px) { .fixed-top-sm { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } body { padding-top: 44px; } } 

      
 Top    
 
 
 
 
Link 2
 
 
  

Answer 1

以下示例是针对此问题的纯Bootstrap 4解决方案。

分解：

• 我们使用两个.navbar ，一个在另一个之下。 在这种情况下，两者都具有相同的.navbar-expand-{breakpoint}类， .navbar-expand-lg 。
• 标题位于.ml-auto .mr-auto类的中心位置。 这使得切换按钮在右边缘完好无损。
• 为了消除底部导航栏折叠时的边框（由底部导航栏的填充引起），导航栏本身会引入.py-0 ，并将.my-2添加到.navbar-collapse以重新获得间距 。
• 最后，将.sticky-top应用于两个导航栏。 因此，当只有顶部导航栏可见时，它将保持固定在顶部，但是当底部导航栏也可见时，它将固定在顶部而不是顶部导航栏。

 #content { height: 200vh; } 

 
 _________TITLE_________    
 
 
 
 Item 1 Item 2 Item 3 Item 4 
 
 
 
 [page content]