引导卡座,每张卡的宽度固定,并具有水平滚动

时间:2019-11-16 10:00:48

标签: html css bootstrap-4 bootstrap-cards

 <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.使用卡片组尝试。

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

如果我使用卡座,则卡会按我的要求水平对齐,但是卡座会通过减小宽度来调整所有卡以适合屏幕尺寸,但是我真正想要实现的是将所有卡都水平对齐具有恒定的宽度和水平滚动。 如果有人可以帮助我,我将不胜感激。

0 个答案:

没有答案