使用Bootstrap 4实现列内容对齐的技术问题咨询

你遇到的核心问题是错误使用了offset-sm-12——Bootstrap的栅格系统基于12列布局，offset-sm-12会直接把元素推到可视区域外，完全达不到你想要的左右对齐效果。我猜你是想让左侧的"Data/Information"和右侧的"Date due/日期"分处行的两端对吧？下面给你两种可行的解决方案：

方案一：用Flex布局快速实现左右对齐（推荐） #

这种方式更灵活，不需要手动计算列宽和偏移量：

<div class="container">
  <div class="row justify-content-between align-items-center">
    <!-- 左侧内容组 -->
    <div class="d-flex align-items-center">
      <div class="col-sm-2"><span><strong>Data</strong></span></div>
      <div class="col-sm-1">Information</div>
    </div>
    <!-- 右侧内容组 -->
    <div class="d-flex align-items-center">
      <div class="col-sm-2"><strong>Date due</strong></div>
      <div class="col-sm-1">11/28/2017</div>
    </div>
  </div>
</div>

关键改动说明： #

• 给row添加justify-content-between：让行内子元素自动分布在左右两端，实现对齐
• 添加align-items-center：让所有元素在垂直方向居中，视觉更协调
• 用d-flex包裹左右两组内容：确保组内的列能在同一水平线排列

方案二：用传统栅格偏移实现 #

如果你习惯用栅格偏移，需要手动计算总列数（含偏移）不超过12：

<div class="container">
  <div class="row align-items-center">
    <div class="col-sm-2"><span><strong>Data</strong></span></div>
    <div class="col-sm-1">Information</div>
    <!-- 计算偏移：12 - 2 -1 -2 -1 = 6，所以用offset-sm-6把右侧内容推到右边 -->
    <div class="col-sm-2 offset-sm-6"><strong>Date due</strong></div>
    <div class="col-sm-1">11/28/2017</div>
  </div>
</div>

两种方式都能实现你想要的布局，推荐第一种Flex方案，后续调整布局会更省心~

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