Bootstrap 4：如何使页眉与1024px wrapper对齐并保持响应式

嘿，我看你在折腾Bootstrap导航栏的布局，要和1024px的wrapper对齐，还要导航左对齐、右边放个300×100的元素，之前用padding、margin和float没达到预期对吧？这很正常，因为Bootstrap的navbar本身是flex布局，硬用float容易冲突，咱们换个思路来解决：

先说说问题出在哪 #

你原来的代码里把container直接加在了navbar-collapse上，层级不对，而且没给右侧元素留位置，自然没法实现左右分布的效果。另外，float和Bootstrap的flex布局不太兼容，用它来调整反而容易打乱布局。

调整后的完整代码 #

我给你改了结构，用Bootstrap的flex类和自定义容器来实现需求，代码如下：

<!-- 自定义容器样式，保证最大宽度1024px，和你的wrapper对齐 -->
<style>
  .custom-wrapper {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
  }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-light border-top border-bottom border-dark">
  <div class="custom-wrapper">
    <a class="navbar-brand" href="#">
      <img class="w-50" src="https://i.imgur.com/YoN2enU.png">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- 导航左对齐，mr-auto把右侧元素挤到右边 -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">start <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">über uns</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">kontakt</a>
        </li>
      </ul>
      <!-- 右侧300×100的元素，用d-flex align-items-center保证垂直居中 -->
      <div class="d-flex align-items-center" style="width: 300px; height: 100px; background: #f0f0f0;">
        <!-- 这里可以替换成你的图片或内容 -->
        右侧元素
      </div>
    </div>
  </div>
</nav>

关键调整点解释 #

• 自定义容器：我加了个.custom-wrapper类，设置最大宽度1024px，左右自动居中，和你的wrapper保持一致的宽度，这样整个导航栏就对齐了。
• flex布局对齐：用navbar-nav mr-auto让导航列表靠左，同时自动把右侧元素推到最右边，这比用float靠谱多了，完全符合Bootstrap的布局逻辑。
• 右侧元素垂直居中：给右侧元素加d-flex align-items-center，保证它和导航栏里的内容垂直居中，不会出现上下错位的情况。
• 响应式兼容：保留了navbar-expand-lg，所以在屏幕小于lg断点时，导航会自动折叠成汉堡菜单，右侧元素也会跟着进去，完全不影响响应式效果。

小Tips #

• 如果右侧元素是图片，直接把<div>换成<img>就行，记得设置宽高为300×100。
• 把自定义容器的CSS放到你的样式文件里，别用内联样式，代码更干净。

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