Question

我正在整理一个基于卡列类的布局。我想要的是在一行中有两张不同宽度的卡片。我正在使用我为演示目的修改的文档中的代码。这是我的代码：

<div class="card-columns">
 <div class="card">
   <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
       <p class="card-text">This is a longer card with supporting text below 
           as a natnt. This content is a little bit longer.</p>
   </div>
</div>
<div class="card"></div>
<div class="card">
   <img class="card-img-top img-fluid" src="..." alt="Card image cap">
   <div class="card-block">
     <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural 
       lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins 
       ago</small></p>
   </div>
</div>

Fiddle

正如你所看到的，我有三张牌，以便将第三张牌推入第二列。有人可以解释一下原因吗？另一个问题是如何使用不同宽度的卡片？

由于

Bootstrap 4个不同宽度的卡片列

0 个答案: