Bootstrap 4 - 当使用 4 张卡片组缩小屏幕时，如何在行之间拆分卡片？答案

【问题标题】：Bootstrap 4 - When shrinking a screen with card group of 4 cards, how to split cards evently between rows?Bootstrap 4 - 当使用 4 张卡片组缩小屏幕时，如何在行之间拆分卡片？
【发布时间】：2020-11-14 18:02:57
【问题描述】：

单行有4张卡组，我如何让它随着屏幕变小，直接从单行4张卡变成第一行2张卡和2张卡第二行，同时跳过第一行中的 3 张牌和第二行中的一张长牌。

这是我的带有引导程序的 HTML 示例

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

<div class="row">
    <div class="col s10 offset-s1 m6 l4">
        <div class="card h-100">
            <div class="card-content">
                <div class="icon-block">
                    <div class="card-title text-center mt-3">
                        <h4 class="center">Item</h4>
                    </div>
                    <h5 class="card-title text-center mt-2">
                        Lorem ipsum dolor sit amet consectetur adipisicing
                        elit. Quia eos, neque veritatis et repellendus,
                        accusantium nisi soluta repellat, quidem aspernatur
                        quae saepe tempora ad? Nam earum labore
                        necessitatibus optio rem.
                    </h5>
                </div>
            </div>
        </div>
    </div>
    <div class="col s10 offset-s1 m6 l4">
        <div class="card h-100">
            <div class="card-content">
                <div class="icon-block">
                    <div class="card-title text-center mt-3">
                        <h4 class="center">Item</h4>
                    </div>
                    <h5 class="card-title text-center mt-2">
                        Lorem ipsum dolor sit amet consectetur adipisicing
                        elit. Quia eos, neque veritatis et repellendus,
                        accusantium nisi soluta repellat, quidem aspernatur
                        quae saepe tempora ad? Nam earum labore
                        necessitatibus optio rem.
                    </h5>
                </div>
            </div>
        </div>
    </div>
    <div class="col s10 offset-s1 m6 l4">
        <div class="card h-100">
            <div class="card-content">
                <div class="icon-block">
                    <div class="card-title text-center mt-3">
                        <h4 class="center">Item</h4>
                    </div>
                    <h5 class="card-title text-center mt-2">
                        Lorem ipsum dolor sit amet consectetur adipisicing
                        elit. Quia eos, neque veritatis et repellendus,
                        accusantium nisi soluta repellat, quidem aspernatur
                        quae saepe tempora ad? Nam earum labore
                        necessitatibus optio rem.
                    </h5>
                </div>
            </div>
        </div>
    </div>
    <div class="col s10 offset-s1 m6 l4">
        <div class="card h-100">
            <div class="card-content">
                <div class="icon-block">
                    <div class="card-title text-center mt-3">
                        <h4 class="center">Item</h4>
                    </div>
                    <h5 class="card-title text-center mt-2">
                        Lorem ipsum dolor sit amet consectetur adipisicing
                        elit. Quia eos, neque veritatis et repellendus,
                        accusantium nisi soluta repellat, quidem aspernatur
                        quae saepe tempora ad? Nam earum labore
                        necessitatibus optio rem.
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

现在看起来您使用的是Materialize grid 类而不是Bootstrap grid 类。

您可以对所有卡片父元素使用col-6 col-md-3，以便它默认拆分为两个，并在达到中等屏幕断点后拆分为4。

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

<div class="row">
  <div class="col-6 col-md-3">
    <div class="card h-100">
      <div class="card-content">
        <div class="icon-block">
          <div class="card-title text-center mt-3">
            <h4 class="center">Item</h4>
          </div>
          <h5 class="card-title text-center mt-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eos, neque veritatis et repellendus, accusantium nisi soluta repellat, quidem aspernatur quae saepe tempora ad? Nam earum labore necessitatibus optio rem.
          </h5>
        </div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card h-100">
      <div class="card-content">
        <div class="icon-block">
          <div class="card-title text-center mt-3">
            <h4 class="center">Item</h4>
          </div>
          <h5 class="card-title text-center mt-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eos, neque veritatis et repellendus, accusantium nisi soluta repellat, quidem aspernatur quae saepe tempora ad? Nam earum labore necessitatibus optio rem.
          </h5>
        </div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card h-100">
      <div class="card-content">
        <div class="icon-block">
          <div class="card-title text-center mt-3">
            <h4 class="center">Item</h4>
          </div>
          <h5 class="card-title text-center mt-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eos, neque veritatis et repellendus, accusantium nisi soluta repellat, quidem aspernatur quae saepe tempora ad? Nam earum labore necessitatibus optio rem.
          </h5>
        </div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card h-100">
      <div class="card-content">
        <div class="icon-block">
          <div class="card-title text-center mt-3">
            <h4 class="center">Item</h4>
          </div>
          <h5 class="card-title text-center mt-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eos, neque veritatis et repellendus, accusantium nisi soluta repellat, quidem aspernatur quae saepe tempora ad? Nam earum labore necessitatibus optio rem.
          </h5>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：