如何在Bootstrap 4 中创建页眉？

Question

由于 .page-header class 已在 Bootstrap 4 中弃用，有人如何创建与 Bootstrap 3 .page-header 具有相同样式的页眉] class?

Answer 1

据我了解，bootstrap 4 中没有直接替换 bootstrap 3 .page-header。

但是 bootstrap 3 .page-header 的 CSS 很简单：

padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;

因此您可以在 css 文件中创建自己的 class：

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

Answer 2

根据migration docs, the Bootstrap 4 utility classes应改为：

<div class="pb-2 mt-4 mb-2 border-bottom">
      Page header
</div>

https://codeply.com/go/20jBKvMkHx

• pb-2 - 填充底部 2 个间隔单元
• mt-4 - 前 4 个间隔单元的边距
• mb-2 - 底部 2 个间隔单元的边距
• border-bottom - border-bottom: 1px solid rgb(222, 226, 230)