Bootstrap 4导航栏折叠菜单改为横向显示的实现咨询

要把Bootstrap 4折叠后的垂直导航改成横向布局，只需要调整几个内置类再加一点点自定义样式就行，我给你一步步说明：

核心修改思路 #

Bootstrap的.navbar-nav默认在折叠状态下是垂直排列的，我们可以用弹性布局类flex-row把它改成横向，再通过响应式调整确保只在折叠状态生效，不影响大屏幕的正常导航。

具体代码示例 #

修改后的导航结构 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <!-- 给navbar-nav添加flex-row类，同时用mx-2调整菜单项间距 -->
    <ul class="navbar-nav flex-row">
      <li class="nav-item active mx-2">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item mx-2">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item mx-2">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item mx-2">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

补充自定义CSS优化 #

为了让小屏幕下的横向菜单更美观（比如空间不足时自动换行、对齐更合理），可以加一段媒体查询：

/* 只在折叠状态下生效（对应navbar-expand-lg的断点） */
@media (max-width: 991.98px) {
  .navbar-nav.flex-row {
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.5rem;
  }
}

关键说明 #

• flex-row：Bootstrap的弹性布局类，直接把默认的垂直排列改为横向
• mx-2：Bootstrap的间距类，给每个菜单项添加左右外边距，避免挤在一起
• 媒体查询：确保只有在屏幕小于lg（992px）的折叠状态下应用这些样式，不会干扰大屏幕上展开的导航布局

这样修改后，点击折叠按钮，菜单就会横向显示，和你想要的效果一致啦！

内容的提问来源于stack exchange，提问作者Muhammet Balcı