如何使用CSS与Bootstrap实现div内元素对齐容器首尾

直接用Bootstrap内置的布局工具类即可实现目标效果，不需要额外编写自定义CSS：

通用方案（兼容Bootstrap 4/5 版本） #

给需要做对齐的父div容器添加两个核心类：

• d-flex：将容器设置为弹性布局容器
• justify-content-between：设置弹性容器主轴对齐方式为两端对齐，容器内的子元素会自动分别贴靠容器起始边缘和末尾边缘，中间自动留白

基础实现代码：

<div class="d-flex justify-content-between p-3 border">
  <!-- 对齐到容器起始端的元素 -->
  <button class="btn btn-primary">左侧操作按钮</button>
  <!-- 对齐到容器末尾端的元素 -->
  <span class="text-muted">右侧说明文本</span>
</div>

如果需要子元素在垂直方向也居中对齐，额外给父容器加align-items-center类即可，适配子元素高度不一致的场景。

如果需要把多个元素分成两组分别靠两侧对齐，直接把同侧的元素包裹在一个普通div里即可，父容器的对齐规则不会受影响：

<div class="d-flex justify-content-between align-items-center p-3 border">
  <!-- 起始端元素组 -->
  <div>
    <button class="btn btn-outline-secondary me-2">返回</button>
    <h5 class="d-inline mb-0">编辑页面</h5>
  </div>
  <!-- 末尾端元素组 -->
  <div>
    <button class="btn btn-primary me-2">保存草稿</button>
    <button class="btn btn-success">提交发布</button>
  </div>
</div>

Bootstrap 3 兼容方案 #

Bootstrap 3没有内置弹性布局工具类，可以用浮动类实现：

• 父容器添加clearfix类清除浮动，避免高度塌陷
• 需要靠起始端的元素加pull-left类
• 需要靠末尾端的元素加pull-right类

代码示例：

<div class="clearfix p-3 border">
  <button class="btn btn-primary pull-left">左侧按钮</button>
  <span class="text-muted pull-right">右侧文本</span>
</div>

效果参考：

注意：使用弹性布局方案时，不要给子元素添加任何浮动类，否则会破坏弹性布局的对齐逻辑。

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