Bootstrap区块布局调整：实现移动端一行显示两个盒子

看起来你是在Bootstrap栅格布局里遇到了列适配的问题，我帮你梳理下调整思路，直接给你可行的修复方案：

核心问题分析 #

你的现有代码里列类不统一（比如有的是col-sm-2、有的是col-sm-6），再加上自定义的col-half-offset偏移类，打乱了移动端的栅格规则，导致没办法一行显示2个盒子。我们需要统一列规则，清理冗余的自定义偏移。

调整后的完整代码 #

<div class="row justify-content-center"> <!-- 让桌面端5个盒子居中对齐 -->
  <!-- 用col-6控制移动端一行2个，col-md-2控制桌面端一行5个 -->
  <div class="col-md-2 col-6 mb-3" id="p1">
    <a href="#" class="d-block"> <!-- 用d-block让a标签包裹整个盒子区域 -->
      <div class="text-center icon-box-bg">
        <img src="images/icon/icon-1.png" alt="功能图标1">
        <h4 class="icon-box-title mt-20">Heading</h4>
        <p class="icon-box-title-sub">Sub Heading</p>
      </div>
    </a>
  </div>
  <div class="col-md-2 col-6 mb-3">
    <a href="#" class="d-block">
      <div class="text-center icon-box-bg">
        <img src="images/icon/icon-2.png" alt="功能图标2">
        <h4 class="icon-box-title mt-20">Heading</h4>
        <p class="icon-box-title-sub">Sub Heading</p>
      </div>
    </a>
  </div>
  <div class="col-md-2 col-6 mb-3">
    <a href="#" class="d-block">
      <div class="text-center icon-box-bg">
        <img src="images/icon/icon-3.png" alt="功能图标3">
        <h4 class="icon-box-title mt-20">Heading</h4>
        <p class="icon-box-title-sub">Sub Heading</p>
      </div>
    </a>
  </div>
  <div class="col-md-2 col-6 mb-3">
    <a href="#" class="d-block">
      <div class="text-center icon-box-bg">
        <img src="images/icon/icon-4.png" alt="功能图标4">
        <h4 class="icon-box-title mt-20">Heading</h4>
        <p class="icon-box-title-sub">Sub Heading</p>
      </div>
    </a>
  </div>
  <div class="col-md-2 col-6 mb-3">
    <a href="#" class="d-block">
      <div class="text-center icon-box-bg">
        <img src="images/icon/icon-5.png" alt="功能图标5">
        <h4 class="icon-box-title mt-20">Heading</h4>
        <p class="icon-box-title-sub">Sub Heading</p>
      </div>
    </a>
  </div>
</div>

关键调整细节 #

1. 统一列规则：

   • 用col-6（Bootstrap 4+默认覆盖移动端）确保小屏幕下一行显示2个盒子（12栅格÷6=2）
   • 保留col-md-2让桌面端一行显示5个盒子（5×2=10栅格，剩余2栅格通过justify-content-center居中）

2. 清理冗余代码：

   • 移除了自定义的col-half-offset，避免干扰栅格布局
   • 修复了嵌套的<a>标签（原代码里<a>套<a>是无效HTML），改用d-block让外层<a>包裹整个交互区域

3. 体验优化：

   • 添加mb-3类给每个列，让移动端盒子之间有垂直间距
   • 给图片添加alt属性，提升可访问性

Bootstrap 3适配方案 #

如果你用的是Bootstrap 3，只需要把col-6换成col-xs-6，justify-content-center换成自定义CSS来实现居中：

.row.center-row {
  margin: 0 auto;
  text-align: center;
}
.row.center-row .col-md-2 {
  float: none;
  display: inline-block;
  margin-right: -4px;
}

然后给父容器row添加center-row类即可。

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