如何在 Bootstrap 中将标头与包装器对齐？

在使用 Bootstrap 进行开发时，经常会遇到需要将标头与包装器对齐的情况。下面给出两种方法供参考。

第一种方法：使用 Flexbox

通过使用 Flexbox 布局，可以很方便地将标头与包装器对齐。

HTML 代码：

<header>
  <h1>Header</h1>
</header>

<main>
  <p>Content goes here</p>
</main>

CSS 代码：

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

header h1 {
  margin: 0;
}

main {
  padding: 15px;
}

代码解释：

• display: flex; 将 header 元素设为 Flexbox 布局。
• justify-content: space-between; 将 header 元素中的内容分散对齐。
• align-items: center; 将 header 元素中的内容垂直居中。
• padding: 15px; 为 header 元素和 main 元素设置内边距。

第二种方法：使用 Bootstrap 栅格系统

Bootstrap 栅格系统是一种非常方便的布局方式，可以将内容分为多个列，从而实现对齐效果。

HTML 代码：

<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col">
      <h1>Header</h1>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col">
      <p>Content goes here</p>
    </div>
  </div>
</div>

CSS 代码：

h1 {
  margin: 0;
}

p {
  padding: 15px;
}

代码解释：

• container-fluid 和 container 分别表示全宽和定宽容器。
• .row 表示行，.col 表示列。
• align-items-center 将行元素垂直居中。
• margin: 0; 取消 h1 元素的上下边距，使其与列元素对齐。

以上两种方法都可以实现将标头与包装器对齐的效果，通过比较可以发现，使用 Flexbox 可以避免使用 Bootstrap ，同时也可以更加灵活地控制布局效果。