如何在Bootstrap 4中创建页眉？

Question

由于在Bootstrap 4中不推荐使用.page-header类，有人如何创建与Bootstrap 3 .page-header类相同样式的页眉？

Answer 1

根据migration docs，应使用Bootstrap 4 utility classes代替：

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

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

• pb-2 - 填充底部2个间隔单元
• mt-4 - 保证金前4个间隔单位
• mb-2 - 边距底部2个间隔单元
• border-bottom - border-bottom：1px solid rgb（222,226,230）

Answer 2

根据我的理解，bootstrap 4中没有直接替换引导程序3 .page-header。

然而，引导程序3 .page-header的CSS只是：

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

所以你可以在你的css文件中创建自己的类：

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