如何让卡片组不包裹在小屏幕上？

Posted 2023-03-05

【中文标题】如何让卡片组不包裹在小屏幕上？

【英文标题】：How to keep card-group from wrapping on small screens?

【发布时间】：2022-01-20 16:15:25

【问题描述】：

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

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

使用此代码，cards 在 575 像素下分开。

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

【问题讨论】：

附加是指水平的同一行吗？即... ... ...

@Kameron，是的，完全正确。

【参考方案1】：

card-group 在默认情况下使用 Bootstrap 在 575px 处丢失 display: flex;。您可以做的是将card-group 设置为始终使用 CSS 或内联 Bootstrap 类进行弹性显示。您也可以考虑使用 grid-system w/ rows 但是，父级 card-group 在 575 时仍会失去弹性。

只需将d-flex 添加为您父母的班级。

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