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” ”。这应该避免堆叠。

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

1 个答案: