Bootstrap 3 实现Logo在上导航栏在下的布局问题求助

嘿，我刚上手Bootstrap 3的时候也踩过这个坑！用<br>换行确实只能生硬地挪位置，根本达不到Logo在上、导航栏在下的布局效果，得用Bootstrap自带的布局规则来调整结构才行。

给你两种实用的解决方案，你可以根据自己的需求选：

方案一：调整导航栏内部结构 #

直接在默认的navbar里把Logo和导航链接拆成两个块级区域，让它们自动换行：

<nav class="navbar navbar-default">
  <div class="container">
    <!-- Logo 单独占一行 -->
    <div class="navbar-header text-center">
      <a class="navbar-brand" href="#">你的Logo</a>
    </div>
    <!-- 导航链接区域 -->
    <div class="collapse navbar-collapse" id="nav-collapse">
      <ul class="nav navbar-nav text-center">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系</a></li>
      </ul>
    </div>
  </div>
</nav>

这里关键是给navbar-header加上text-center（如果你需要Logo居中的话），这个类会自动取消navbar-brand的默认浮动，让Logo单独占一行。导航链接的navbar-nav也加了text-center，让链接居中排列，不需要的话可以去掉。

方案二：用网格系统拆分布局 #

如果想把Logo和导航栏完全分开成两个独立的区块，用Bootstrap的网格系统更清晰：

<div class="container">
  <!-- Logo 行 -->
  <div class="row">
    <div class="col-xs-12 text-center">
      <a href="#" class="navbar-brand">你的Logo</a>
    </div>
  </div>
  <!-- 导航栏行 -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">首页</a></li>
          <li><a href="#">博客</a></li>
          <li><a href="#">服务</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

这种方式把Logo放在单独的row和col-xs-12里，确保它占满整个宽度，下面再放完整的导航栏，布局更灵活。

小提示 #

如果觉得Logo的间距不合适，可以自定义CSS调整：

.navbar-brand {
  float: none; /* 强制取消浮动 */
  padding: 15px 0; /* 调整上下内边距，按需修改 */
}

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