使用Bootstrap为不同屏幕设置列类的布局问题

让我们一步步拆解你的问题，然后给出适配你新需求的解决办法：

为什么原本的布局失效？ #

1. md/lg屏幕下仅两个div一行：你给每个列自定义了margin: 0 20px，而Bootstrap的.col-md-4本身占父容器的33.33%宽度。三个列的宽度加上左右各20px的外边距，总宽度会超过100%，浏览器只能把第三个列挤到下一行。
2. 小屏幕未垂直排列：你用的col-sm-12是指**屏幕宽度≥576px（sm断点）**时，列占12格（一行一个），但如果你的平板屏幕刚好在576px-767px之间，理论上应该垂直排列——不过同样是自定义margin的问题，可能导致列被挤压在一行，破坏了栅格的预期行为。

适配新需求：一行两个div，第三个换行 #

针对你现在想要的布局，我们可以这样调整：

1. 修改栅格列的类 #

把原来的col-sm-12 col-md-4替换成col-sm-12 col-md-6：

• col-md-6：在≥768px（md及以上）的屏幕上，每个列占6格，刚好一行放下两个
• col-sm-12：在<768px的屏幕上，每个列占12格，自动垂直排列

2. 修复自定义margin的布局冲突 #

Bootstrap的栅格系统靠内置的padding和负margin实现列间距，自定义margin: 0 20px会打乱这个计算逻辑，推荐两种处理方式：

• 方式一：用Bootstrap内置间距类（更推荐）
  给.row添加gx-4类（水平间距，对应左右各1.5rem的间距，类似你原来的20px），然后删除CSS里的.about .row.boxes >div{ margin: 0 20px 0 20px; }：

  <div className="row boxes justify-content-md-center gx-4">
  

• 方式二：保留自定义margin但调整宽度
  如果一定要用自定义margin，给列添加box-sizing: border-box（Bootstrap默认已包含），同时可以用calc调整列宽，比如把.col-md-6改成自定义宽度：

  .about .row.boxes >div{
    margin: 0 20px;
    width: calc(50% - 40px); /* 50%宽度减去左右各20px的margin */
  }
  

3. 完整修改示例 #

修改后的HTML列结构：

<section className="about" id="about">
  <div className="container-fluid">
    <div className="row boxes justify-content-md-center gx-4">
      <div className="col-sm-12 col-md-6 box">
        <!-- 第一个box的内容不变 -->
      </div>
      <div className="col-sm-12 col-md-6 box">
        <!-- 第二个box的内容不变 -->
      </div>
      <div className="col-sm-12 col-md-6 box">
        <!-- 第三个box的内容不变 -->
      </div>
    </div>
  </div>
</section>

修改后的CSS（删除冲突的margin规则）：

.about{ padding: 127px 0 196px 0; }
/* 移除这行：.about .row.boxes >div{ margin: 0 20px 0 20px; } */
.about .box{ height: 550px; width: 100%; background-image: linear-gradient(144deg, #fdfdfd, #f9f9f9); }
.about .innerBox{ margin: auto; color: black; width: 100%; overflow: hidden; }
.box-list-items > div { display: inline-block; }
.box-list-items img { height: 35%; width: 35%; }
.icons { height: 95px; width: 95px; float: right; margin: 7% 5% 5% 0; }
.icons img { width: 100%; height: 100%; }
h3.box-title{ font-size: 2.7em; }

额外优化：让第三个div居中显示 #

如果你希望md及以上屏幕中，第三个单独一行的div居中，可以给它加上mx-auto类：

<div className="col-sm-12 col-md-6 box mx-auto">

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