如何防止卡片组在小屏幕上换行？

Question

如何在较小的屏幕上使 card-group 中的 cards 彼此相邻？

它们在大屏幕上是附加的，但在小屏幕上是分开的。我将额外的卡片隐藏在较小的屏幕上，并且更喜欢使用附加的第一张卡片。

使用此代码 cards 在 575px 下分开。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid">
  <div class="card-group">
    <div class="card">
      ...
    </div>
    <div class="card">
      ...
    </div>
    <div class="card">
      ...
    </div>
    <div class="card d-none d-md-block">
      ...
    </div>
    <div class="card d-none d-lg-block">
      ...
    </div>
    <div class="card d-none d-xl-block">
      ...
    </div>
  </div>
</div>

如何在小屏幕上继续显示前三个 cards？

Answer 1

默认情况下，

card-group 在 575px 处失去了它的 display: flex; w/ Bootstrap。您可以做的是使用 CSS 或内联 Bootstrap classes 将 card-group 设置为始终具有 flex-display。您也可以考虑使用 grid-system w/ rows 但是，parent、card-group 仍然会在 575 时失去弹性。

只需在 parent 上添加 d-flex 作为 class。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid">
  <div class="card-group d-flex">
    <div class="card">
      ...
    </div>
    <div class="card">
      ...
    </div>
    <div class="card">
      ...
    </div>
    <div class="card d-none d-md-block">
      ...
    </div>
    <div class="card d-none d-lg-block">
      ...
    </div>
    <div class="card d-none d-xl-block">
      ...
    </div>
  </div>
</div>

如何防止卡片组在小屏幕上换行？

How to keep card-group from wrapping on small screens?

html

css

responsive-design

twitter-bootstrap

bootstrap-5