Bootstrap 4文本堆叠实现失败求助：如何让员工信息上下排列

用Bootstrap 4的Flex布局类轻松实现堆叠效果 #

嘿，我懂你想要的效果——在NavBar上方做一个顶部信息栏，左侧放logo，右侧让「员工姓名-编号」和「安全组」上下堆叠显示对吧？之前用<div>、<br>或者<p>没成功，大概率是没用到Bootstrap 4自带的flex布局工具类，毕竟Bootstrap 4是flex优先的框架，用它的原生类比自己写样式靠谱多了。

给你一个直接可用的代码示例，核心是用d-flex做容器，右侧用flex-column让内容垂直堆叠：

<!-- 顶部信息栏 -->
<div class="container-fluid d-flex justify-content-between align-items-center p-3 border-bottom">
  <!-- 左侧Logo -->
  <div class="logo">
    <img src="你的logo地址" alt="Logo" width="100">
  </div>
  <!-- 右侧员工信息，用flex-column实现垂直堆叠 -->
  <div class="d-flex flex-column align-items-end">
    <span>张三 - EMP001</span>
    <span class="text-muted">安全组：管理员</span>
  </div>
</div>

<!-- 下面的Bootstrap NavBar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">NavBar</a>
    <!-- 其他NavBar内容 -->
  </div>
</nav>

关键类说明： #

• d-flex：把容器变成flex布局，这是Bootstrap 4布局的基础
• justify-content-between：让左右两个子元素分别贴住容器的左右两端
• flex-column：把右侧的信息容器设置为垂直方向的flex布局，里面的内容就会自动上下堆叠
• align-items-end：让右侧堆叠的内容靠右对齐（如果想靠左就用align-items-start）
• align-items-center：让顶部栏的整体内容垂直居中，避免logo和员工信息上下错位

这样写出来的效果完全符合你的需求，而且不用自己写额外的CSS，完美适配Bootstrap的响应式特性~

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