尽管 Bootstrap col 说 col-md-4,但为什么它会采用全宽?

PKTG

我试图row impact-section用引导程序将 的内容放在 3 列中。我看到父级<div class="col-md-12">正在阻止创建列。如何确保row impact-section3 列中的内容。下面是整个部分。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

佩纳尔兹
    You were suppose to close the div here ,before starting the columns for each

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


    Look at the code below,


    <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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章