阻止Bootstrap卡以sm和xs宽度堆叠

Question

页面切换到小于md尺寸的宽度时，卡片开始堆叠。如何防止卡堆叠并使它们在sm和xs期间看起来与md相同？

这是与图片相对应的代码。

<div class="card-group">
<div class="card">
  <img class="card-img-top" src="/img/faces/house/img" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Paul Dilks</h5>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <img class="card-img-top" src="/img/faces/house/img" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Donald Norcross</h5>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
</div>

Answer 1

习惯flex-row flex-nowrap在卡组上以防止包裹/堆叠...

<div class="card-group flex-row flex-nowrap">
    <div class="card">
        <img class="card-img-top" src="//placehold.it/500x300" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Paul Dilks</h5>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="//placehold.it/500x300/000/fff" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Donald Norcross</h5>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
</div>

https://www.codeply.com/go/689jWCqNir