为什么设置了col-md-4的Bootstrap列仍占满宽度，如何实现3列布局？

问题原因 #

你之前的排查方向存在偏差，外层col-md-12本身不会导致栅格布局失效，真正的问题是不符合Bootstrap栅格系统的规则：所有col-*类元素必须是带row类元素的直接子元素。
你现有代码中，row impact-section的直接子元素只有<div id="shopify-section-impact">，三个col-md-4都在这个容器内部，同时标题<h2>和列元素平级放置，破坏了栅格结构，才导致多列布局无法生效。

调整方案 #

你可以按如下结构修改，把标题单独占满整行，新增row容器包裹三个列即可：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="col-md-12">
  <div class="product-view product-page-area ">
    <div class="row impact-section">
      <div id="shopify-section-impact" class="shopify-section w-100">
        <!-- 标题单独占满整行 -->
        <h2 class="mb-3">Our Gifts Create an Impact</h2>
        <!-- 新增row作为三个列的直接父级 -->
        <div class="row">
          <div class="col-md-4">
            <div><img src=""></div>
            <div>160,000</div>
            <div>Lives impacted last year across 28 states and 35 countries</div>
          </div>
          <div class="col-md-4">
            <div><img src=""></div>
            <div>30%</div>
            <div>Ratio of PwP's purveyor businesses that are female- and diverse-owned</div>
          </div>
          <div class="col-md-4">
            <div><img src=""></div>
            <div>50,000+</div>
            <div>Hours of training provided for youth and adults with employment barriers</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果不需要保留shopify-section-impact的层级，也可以直接把这个容器移除，给h2加上col-12类，让h2和三个列直接作为row impact-section的子元素，同样可以正常实现3列布局。

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