使用 flexbox 堆叠列 - 移动屏幕上 2 列，大屏幕上 3 列

Question

我正在尝试将我的 flexbox 设计为在大屏幕上有 3 列，在移动屏幕上有 2 列（见下图 1 和 2）。这是我的 JS Fiddle 和我的代码：

它在大屏幕上工作正常，但无法让它在小屏幕上正确呈现。

    <div class="row">
      <div class="card col-lg-4 col-xs-6">
        <img class="card-img-top" src="..." />
        <div class="card-body">
          <h6 class="card-title">Semi Truck</h6>
        </div>
      </div>
      <div class="card col-lg-4 col-xs-6">
        <img class="card-img-top" src="..." />
        <div class="card-body">
          <h6 class="card-title">Box Truck</h6>https://jsfiddle.net/kwxj83v6/6/
        </div>
      </div>
      <div class="card col-lg-4 col-xs-6">
        <img class="card-img-top" src="..." />
        <div class="card-body">
          <h6 class="card-title">Dump Truck</h6>
        </div>
      </div>
    <div class="card col-lg-4 col-xs-6">
      <img class="card-img-top" src="..." />
      <div class="card-body">
        <h6 class="card-title">Tow Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-xs-6">
      <img class="card-img-top" src="..." />
      <div class="card-body">
        <h6 class="card-title">Tank Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-xs-6">
      <img class="card-img-top" src="..." />
      <div class="card-body">
        <h6 class="card-title">Pickup Truck</h6>
      </div>
    </div>
  </div>

谢谢

Answer 1

部分Bootstrap CSS如下：

@media (min-width: 992px) {
    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

这确保在大于 992px 的屏幕上，flex 子项的大小为 33%。 .col-xs-6 没有这样的 CSS 定义，因此您需要自己将其添加到单独的 CSS 文件中。类似于以下内容：

@media (max-width: 992px) {
    .col-xs-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

Answer 2

在 bootstrap 4 col-xs-* 更新为 col-* 您可以参考文档 https://getbootstrap.com/docs/4.2/layout/grid/#grid-options

这里可以根据自己的需要使用col-6或者col-sm-6

还有这个 bootstrap-cheatsheet 有助于快速参考。 https://hackerthemes.com/bootstrap-cheatsheet/

Answer 3

col-xs-6 从现在开始不适用于 bootstrap。您可以为此使用 col-6，以便在 lg 屏幕

下方并排制作两个图像

额外：如果您只想在 sm 屏幕上显示两个图像而不是在 md 或 lg 上，那么您可以使用此方法。

col-lg-4 col-md-4 col-6

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <div class="row">
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Semi Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Box Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Dump Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Tow Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Tank Truck</h6>
      </div>
    </div>
    <div class="card col-lg-4 col-6">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1590142035743-0ffa020065e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      <div class="card-body">
        <h6 class="card-title">Pickup Truck</h6>
      </div>
    </div>
  </div>

</body>

</html>

使用 flexbox 堆叠列 - 移动屏幕上 2 列，大屏幕上 3 列

Stack columns with flexbox - 2 columns on mobile screen, 3 columns on large screen

css

bootstrap-4

flexbox

grid

flexboxgrid