多个 .col 类在 Bootstrap 中不起作用

Question

我只是在尝试 Bootstrap，有点困惑，为什么当我将多个 .col 类应用于一个 div 时，它似乎没有任何影响。这是我的代码：

<div class="container">    
  <div class="row">
    <div class="col-lg-4 col-md-8 col-sm-10 col-12 text-center">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="cheryl-winn-boujnida-65955.jpg" alt="Card image cap">
        <h4 class="card-title">
          <i class="fa fa-circle-o-notch" aria-hidden="true"></i>
          Fast photo printing
        </h4>
        <p class="card-text">Upload content and have it sent to your address within 3 hours</p>
      </div>
    </div>
    <div class="col-lg-4 col-md-8 col-sm-10 col-12 text-center">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="neonbrand-371471.jpg" alt="Card image cap">
        <h4 class="card-title">
          <i class="fa fa-superpowers" aria-hidden="true"></i>
          Total access
        </h4>
        <p class="card-text">Access your media from any device, from any location</p>
      </div>
    </div>
    <div class="col-lg-4 col-md-8 col-sm-10 col-12 text-center">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="allef-vinicius-205147.jpg" alt="Card image cap">
        <h4 class="card-title">
          <i class="fa fa-ravelry" aria-hidden="true"></i>
          Freedom
        </h4>
        <p class="card-text">Choose your package to suit your needs and usage</p>
      </div>
    </div>
  </div>
</div>

div 在大屏幕上可以水平排列，但是当我减小屏幕尺寸时，div 会堆叠，但似乎没有考虑到我尝试对 .col 类应用的设置。

Answer 1

如果在 Bootstrap 中列类值的总和大于 12，则列将堆叠。例如，在您的代码中，您为三个 div 指定了一个类“.col-md-8”。因此，行的大小为 8*3 = 24，大于 12，无法放入 Bootstrap 容器中。因此，它们越来越多。

为避免堆叠，您应该将“.col-md-8”设置为“.col-md-4”，并将“.col-sm-10”更改为“.col-sm-4” ”。这应该避免堆叠。