为什么 Bootstrap col 尽管它说的是 col-md-4 却占据了整个宽度？

Question

我尝试将 row impact-section 的内容与 bootstrap 放在 3 列中。我看到父级 <div class="col-md-12"> 正在阻止创建列。如何确保 row impact-section 的内容在 3 列中。以下是整个部分。

<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">
        <h2>Our Gifts Create an Impact</h2>
        <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>

Answer 1

您应该在此处关闭 div，然后再开始每个

的列

    <div id="shopify-section-impact" class="shopify-section">
        <h2>Our Gifts Create an Impact</h2>
    </div>

看下面的代码，

    <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">
                    <h2>Our Gifts Create an Impact</h2>
                </div>
                <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>

为什么 Bootstrap col 尽管它说的是 col-md-4 却占据了整个宽度？

Why does a Bootstrap col take the full width despite it saying col-md-4?

html

frontend

bootstrap-4