Question

我想知道如何定义每行的卡数。我想连续使用两张中等大小的卡片，但每次更改我都仍然有4张。

这是整个引导程序。

<div class="container-fluid">
<div class="card-deck">
<div class="card col-md-6">
  <img class="card-img-top" src="img/historia_kľačno.jpg" alt="História Kľačna">
  <div class="card-body">
    <h5 class="card-title">História Kľačna</h5>
    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card col-md-6">
  <img class="card-img-top" src="img//zelena_ruža.jpg" alt="">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <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>
<div class="card col-md-6">
  <img class="card-img-top" src="img/hlineny_dom.jpg" alt="Hlinený dom">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card col-md-6">
    <img class="card-img-top" src="img/rusko.jpg" alt="Potravinová nezávislosť">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>

Answer 1

您必须在col-md-6之前添加

Bootstrap 4更改每行卡数

1 个答案: