如何在Bootstrap 3中构建含固定尺寸头像的页眉导航布局？

嘿，我懂你想要的效果——一个铺满全屏的页眉，上方是带右侧固定尺寸头像的静态标题栏，下方是Bootstrap导航栏，而且两者高度完全一致，还不想用表格布局对吧？没问题，用Flexbox结合Bootstrap的现有组件就能轻松实现，这也是现在最推荐的布局方案，比表格灵活太多了。

核心思路 #

1. 用外层容器包裹标题栏和导航栏，确保它们占满全屏宽度
2. 给标题栏和导航栏设置统一高度，同时用Flex实现内容垂直居中
3. 右侧头像固定尺寸，通过Flex的对齐方式放在标题栏最右侧
4. 复用Bootstrap的navbar组件，仅微调样式让它和标题栏高度匹配

完整代码实现 #

HTML部分

<header class="page-header">
  <!-- 静态标题栏 -->
  <div class="header-title-bar d-flex align-items-center">
    <div class="container-fluid">
      <div class="d-flex justify-content-between align-items-center h-100">
        <h1 class="mb-0">页面标题</h1>
        <!-- 右侧固定尺寸头像 -->
        <div class="user-avatar">
          <img src="你的头像地址.jpg" alt="用户头像">
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid h-100">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">产品</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">关于我们</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

CSS部分

/* 外层页眉容器，确保全屏宽度 */
.page-header {
  width: 100%;
  background-color: #f8f9fa; /* 标题栏背景色，可自定义 */
}

/* 设置标题栏和导航栏的统一高度 */
.header-title-bar,
.navbar {
  height: 60px; /* 你可以根据需求调整这个高度值 */
}

/* 标题栏内部容器确保占满高度 */
.header-title-bar .container-fluid {
  height: 100%;
}

/* 固定头像尺寸 */
.user-avatar img {
  width: 45px; /* 固定宽度 */
  height: 45px; /* 固定高度，和宽度一致就是圆形 */
  border-radius: 50%; /* 可选，做成圆形头像 */
  object-fit: cover; /* 确保图片拉伸不变形 */
}

/* 导航栏链接垂直居中（因为设置了固定高度） */
.navbar-nav .nav-link {
  display: flex;
  align-items: center;
  height: 100%;
}

关键细节说明 #

• Flexbox的使用：通过Bootstrap内置的d-flex、align-items-center、justify-content-between类，轻松实现内容的水平和垂直对齐，不用写额外的Flex CSS
• 等高设置：给标题栏和导航栏统一设置height属性，确保两者高度完全一致；同时用h-100让内部容器占满父元素高度
• 头像固定尺寸：直接给img标签设置width和height，配合object-fit: cover保证图片不会变形，border-radius: 50%可以做成圆形头像（可选）
• 响应式兼容：保留了Bootstrap导航栏的折叠按钮，在小屏幕上依然能正常工作

这个方案完全不需要表格布局，利用Bootstrap的工具类+少量自定义CSS就能实现你要的效果，而且结构清晰、易于维护。

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