1 
 <div class="container mt-3">
    <div class="row" style="overflow-x:scroll; overflow-y: hidden; white-space: nowrap; height: 300px;">
      <div class="col-auto mb-3">

  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</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">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</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">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</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">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</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>
    </div>
    </div>

所以我想要实现的是拥有一排相同宽度和高度的多张卡片。在上面的代码中，我所做的是连续粘贴了 4 个引导卡实例。

为了达到我想要的效果，我尝试了以下方法 - 1. 尝试在“col-lg-3”等列中使用不同的变体。2.尝试保持卡片的固定宽度。3. 尝试使用卡片组。

我面临的问题是，无论我如何尝试将卡片排列成一排，卡片都会保持垂直而不是水平排列。

如果我使用卡片组，那么卡片会根据需要水平对齐，但是卡片会通过减小宽度来调整所有卡片以适应屏幕尺寸，但我真正想要实现的是所有卡片都以恒定宽度水平对齐带有水平滚动条。如果有人可以帮助我，我将不胜感激。

4

0 回答 0