嘿，针对你关于Bootstrap 4页面页眉的两个问题，我整理了实用的解决方案：

Bootstrap 4移除了专门的.page-header类，但我们可以用它提供的排版工具、间距类和布局组件轻松构建灵活的页面页眉，这里有几个常用方案：

基础版页面页眉 #

用容器、标题和间距类组合，简单直接：

<div class="container mt-4">
  <div class="row">
    <div class="col">
      <h1 class="mb-3">我的页面标题</h1>
      <p class="text-muted">这里可以放页面的副标题或者简短描述</p>
    </div>
  </div>
</div>

• mt-4给页眉添加上边距，避免和顶部内容贴得太近
• mb-3控制标题和下方文本的间距
• text-muted让描述文本呈现柔和的灰色，贴合Bootstrap的设计风格

结合面包屑的复杂页眉 #

如果需要加入面包屑导航，直接把它和标题放在同一个容器里即可：

<div class="container mt-4">
  <div class="row">
    <div class="col">
      <!-- 面包屑导航 -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">首页</a></li>
          <li class="breadcrumb-item"><a href="#">分类</a></li>
          <li class="breadcrumb-item active" aria-current="page">当前页面</li>
        </ol>
      </nav>
      
      <h1 class="mb-3">详细内容页面</h1>
      <p class="text-muted">这是一篇关于Bootstrap页眉的详细教程</p>
    </div>
  </div>
</div>

既然Bootstrap 4废弃了.page-header，我们可以自己写一段CSS复刻Bootstrap 3里的样式效果。Bootstrap 3的.page-header核心特征是：上下内边距、底部灰色边框、合适的上下外边距。

第一步：添加自定义CSS #

在你的样式文件里加入这段代码：

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

• 你可以根据需求调整padding、margin数值，或者修改border-bottom的颜色和样式

第二步：使用自定义的.page-header类 #

和Bootstrap 3里的用法完全一致：

<div class="container">
  <div class="page-header">
    <h1>页面主标题 <small>可选副标题</small></h1>
  </div>
</div>

这样就能得到和Bootstrap 3一模一样的页面页眉样式了。

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