如何让Bootstrap3导航栏菜单与底部方块处于同一行？

我来帮你搞定这个布局问题！你现在遇到的菜单和底部方块不在同一行的情况，大概率是Bootstrap栅格布局的宽度分配、元素对齐或者默认样式冲突导致的，下面给你几个针对性的解决办法：

• 检查栅格布局的结构与宽度分配
  首先要确保菜单和底部方块处于同一个.row容器下的不同列中，并且列的宽度总和不超过12（Bootstrap3的栅格总列数）。比如你当前用了col-xs-1放底部方块，那菜单就需要对应使用col-xs-11来占据剩余空间，避免换行。调整后的代码结构可以参考：

  <nav class="navbar navbar-default navbar-fixed-top" style="background-color: white;" role="navigation">
    <!-- 用container-fluid包裹row，避免内容溢出视口 -->
    <div class="container-fluid">
      <div class="row" style="height: 35.35px; margin-bottom: 0.5%;">
        <!-- 底部方块 -->
        <div class="col-xs-1">&...</div>
        <!-- 菜单容器 -->
        <div class="col-xs-11">
          <!-- 这里放入你的菜单代码，比如Bootstrap默认的navbar-nav -->
          <ul class="nav navbar-nav">
            <li><a href="#">菜单选项1</a></li>
            <li><a href="#">菜单选项2</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  

• 修复垂直对齐与高度匹配问题
  你给.row设置了固定高度35.35px，但里面的列元素可能没有垂直居中，导致视觉上看起来不在同一行。Bootstrap3没有内置的flex对齐类，你可以自定义CSS来实现垂直居中：

  /* 让row内的列垂直居中并撑满高度 */
  .navbar .row > [class^="col-"] {
    display: table-cell;
    vertical-align: middle;
    float: none; /* 取消默认浮动，用table布局实现对齐 */
    height: 100%;
  }
  

  如果你想使用flex布局（需要注意浏览器兼容性），也可以这样写：

  .navbar .row {
    display: flex;
    align-items: center; /* 垂直居中 */
  }
  

• 清除额外的边距与内边距
  检查菜单元素（比如.navbar-nav的li标签）是否带有默认的margin或padding，导致总宽度超出列的范围而换行。可以添加自定义CSS重置这些样式：

  .navbar-nav > li {
    margin-left: 0; /* 根据你的需求调整间距 */
    padding-left: 0;
  }
  

• 贴合Bootstrap navbar的默认结构
  有时候自定义结构会破坏Bootstrap navbar的默认布局逻辑，建议尽量贴合官方结构，比如把元素放在.navbar-header和.navbar-collapse中，这样能更好地利用Bootstrap的内置样式：

  <nav class="navbar navbar-default navbar-fixed-top" style="background-color: white;" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <!-- 底部方块用pull-left实现左对齐，宽度对应col-xs-1 -->
        <div class="pull-left" style="width: 8.33%; margin-right: 15px;">&...</div>
        <!-- 菜单折叠容器 -->
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">菜单选项1</a></li>
            <li><a href="#">菜单选项2</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  

内容的提问来源于stack exchange，提问作者Dr3w Br1ck13