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

希望这就是您想要的。此解决方案适用于Bootstrap3。如果您正在使用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>

引导程序列为什么不自动获取12列？

1 个答案: