如何在 Bootstrap 4 中设置卡片组中每行的卡片数量

Question

我正在寻找在 bootstrap 中设置卡片组每行卡片数量的解决方案。

例如，我希望每行有两张卡片：

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
 
<div class="card-deck row">
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
    Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
          Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
          Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
          Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>

Answer 2

这是你想要的吗？？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>

Answer 3

我希望你喜欢这样：并且您想要更多 卡片之间的差距 您将 class .md-3 更改为 .md-4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div>
   <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div> <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div> <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div>
</div>

如何在 Bootstrap 4 中设置卡片组中每行的卡片数量

How to set number of cards per row in card-deck in Bootstrap 4

css

bootstrap-4

bootstrap-cards