html - 为什么 bootstrap col 不自动采用 12 列？

Question

我正在尝试让三张卡片在 Bootstrap 中以某种方式运行。

所有三张卡片在笔记本电脑 View 及上方水平堆叠 (col-lg-4)。这很好用。

前两张卡片在 iPad View 中水平堆叠，最后一张卡片垂直堆叠在它们下方(前两张卡片为 col-md-6，最后一张卡片为 col-md-12)。这也很好用。

由于我没有声明移动设备的行为，我希望所有三张卡片在小屏幕(移动设备及以下)中自动垂直堆叠，但事实并非如此。对于移动设备甚至更小的屏幕，前两个只需要 6 列。

我已经尝试将默认的 col 类添加到前两个类中，但它们效果不佳。

    <div class="col col-lg-4 col-md-6">
      <div class="card">
        <div class="card-header">
          <h3>Chihuahua</h3>
        </div>
        <div class="card-body">
          <h2>Free</h2>
          <p>5 Matches Per Day</p>
          <p>10 Messages Per Day</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>
        </div>

      </div>

    </div>

    <div class="col col-lg-4 col-md-6">
      <div class="card">
        <div class="card-header">
          <h3>Labrador</h3>
        </div>
        <div class="card-body">
          <h2>$49 / mo</h2>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>

        </div>

      </div>
    </div>

    <div class="col-lg-4">
      <div class="card">
        <div class="card-header">
          <h3>Mastiff</h3>
        </div>
        <div class="card-body">
          <h2>$99 / mo</h2>
          <p>Pirority Listing</p>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>
        </div>

      </div>
    </div>

我希望当我转到移动设备 View 时，所有卡片都垂直堆叠，当我在 iPad View 中时，前两张在水平线上，但第三张在它们下方垂直。但前两个保持在水平线上，而第三个在移动设备甚至更小的屏幕上位于水平线下方。

Answer 1

希望这就是您想要的。此解决方案适用于 Bootstrap 3。如果您使用的是 Bootstrap 4，则必须进行一些网格调整。

 <div class="container-fluid">

     <div class="row">

         <div class="col-sm-6 col-md-4">
             <div class="card">
                 <div class="card-header">
                     <h3>Chihuahua</h3>
                 </div>
                 <div class="card-body">
                     <h2>Free</h2>
                     <p>5 Matches Per Day</p>
                     <p>10 Messages Per Day</p>
                     <p>Unlimited App Usage</p>
                     <button type="button">Sign Up</button>
                 </div>
             </div>
         </div>

         <div class="col-sm-6 col-md-4">
             <div class="card">
                 <div class="card-header">
                    <h3>Labrador</h3>
                 </div>
                 <div class="card-body">
                     <h2>$49 / mo</h2>
                     <p>Unlimited Matches</p>
                     <p>Unlimited Messages</p>
                     <p>Unlimited App Usage</p>
                     <button type="button">Sign Up</button>
                 </div>
             </div>
         </div>

         <div class="col-md-4 visible-xs visible-md visible-lg">
             <div class="card">
                 <div class="card-header">
                     <h3>Mastiff</h3>
                 </div>
                 <div class="card-body">
                     <h2>$99 / mo</h2>
                     <p>Pirority Listing</p>
                     <p>Unlimited Matches</p>
                     <p>Unlimited Messages</p>
                     <p>Unlimited App Usage</p>
                     <button type="button">Sign Up</button>
                 </div>
             </div>
         </div>

         <div class="row visible-sm">
             <div class="col-sm-12">
                 <div class="card">
                     <div class="card-header">
                         <h3>Mastiff</h3>
                     </div>
                     <div class="card-body">
                         <h2>$99 / mo</h2>
                         <p>Pirority Listing</p>
                         <p>Unlimited Matches</p>
                         <p>Unlimited Messages</p>
                         <p>Unlimited App Usage</p>
                         <button type="button">Sign Up</button>
                     </div>
                 </div>
             </div> 
         </div>

     </div>

 </div>