Bootstrap 4导航栏取消响应式：移除切换器并保持单行

阿华AIGC实验室

2026-5-22

好的，要把Bootstrap 4导航栏改成完全非响应式，去掉移动端的汉堡切换按钮，让所有屏幕尺寸下导航项都固定显示在品牌右侧、超出部分自动隐藏，其实核心就是干掉Bootstrap默认的响应式折叠逻辑，下面是具体的实现步骤：

1. 清理HTML结构，移除响应式相关元素

首先把导航栏里的汉堡切换按钮（navbar-toggler）删掉，同时去掉包裹导航项的collapse navbar-collapse容器——这俩是Bootstrap实现响应式折叠的核心组件，留着会干扰我们的非响应式布局。调整后的HTML结构大概是这样：

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">My Brand</a>
  <!-- 直接将导航项放在品牌旁边，无需折叠容器 -->
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">产品</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">服务</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">关于我们</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">联系我们</a>
    </li>
  </ul>
</nav>

2. 添加自定义CSS覆盖Bootstrap的响应式样式

Bootstrap默认在小屏幕（小于992px）下会把导航项改成垂直排列，我们需要用CSS强制它保持横向布局，同时处理超出部分的显示：

/* 强制导航项始终横向排列，不换行，超出隐藏 */
.navbar-nav {
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* 调整导航项之间的间距，让布局更美观（可选） */
.nav-item {
  margin-left: 1rem;
}

/* 覆盖Bootstrap默认的小屏幕样式，确保导航栏整体不换行 */
@media (max-width: 991.98px) {
  .navbar {
    flex-wrap: nowrap;
  }
  /* 让导航项靠右对齐，和大屏端布局保持一致 */
  .navbar-nav {
    margin-left: auto;
  }
}