为什么 bootstrap col 不自动占用 12 列？

Question

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

所有三张卡片在笔记本电脑视图及上方水平堆叠 (col-lg-4)。这工作正常。

前两张卡片在 iPad 视图中水平堆叠，而最后一张卡片垂直堆叠在它们下方（前两张卡片为 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>

当我进入移动视图时，我希望所有卡片都垂直堆叠，当我在 iPad 视图中时，前两个在水平线上，但第三个在垂直下方。但前两个仍然在水平线上，而第三个在移动设备甚至更小的屏幕上低于。

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>