Question

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

例如，我想每行有两张卡：

<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="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 2

<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 3

我希望你这样：并且您想要更多的卡之间的距离，请将类别 .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的卡片组中设置每行的卡片数

3 个答案: