如何在小屏设备上保持Bootstrap导航菜单项水平排列？

这个问题我之前也碰到过！Bootstrap 3默认在小屏幕（小于768px）下会把.navbar-nav里的菜单项改成垂直堆叠，list-inline之所以没用，是因为框架的响应式样式优先级更高。下面给你几个可行的解决办法：

方法1：覆盖Bootstrap的响应式样式（最稳妥） #

直接写自定义CSS，强制小屏下列表项水平排列。注意要把这段CSS放在Bootstrap的样式文件之后，确保优先级足够：

/* 针对小于768px的屏幕生效 */
@media (max-width: 767px) {
  .navbar-nav > li {
    float: left; /* 让菜单项横向浮动 */
  }
  .navbar-nav {
    float: left;
    margin: 0; /* 清除默认的上下外边距 */
  }
  .navbar-default .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px; /* 保持和大屏一致的内边距，避免样式错乱 */
  }
}

原理是通过媒体查询，在小屏场景下重置.navbar-nav和子项的布局属性，强制它们保持水平排列，同时保留navbar的原有样式细节。

方法2：替换布局类（适合简化场景） #

如果不需要navbar的复杂交互（比如折叠按钮），可以直接换掉navbar-nav类，改用list-inline，但需要补一点样式来对齐navbar的默认外观：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="list-inline">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

再添加一点CSS调整间距：

.list-inline > li {
  padding-right: 20px;
  padding-left: 20px;
}

这个方法会丢失navbar的部分内置样式（比如active状态的背景色），需要你自己额外调整，适合样式需求简单的场景。

方法3：修改Bootstrap断点（不推荐临时场景） #

如果需要全局调整navbar的响应式触发阈值，可以修改Bootstrap源码（Less/Sass）里的@grid-float-breakpoint变量后重新编译，但这个步骤比较繁琐，只适合需要大规模定制框架的场景，临时解决这个问题没必要这么做。

内容的提问来源于stack exchange，提问作者Houy Narun