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

【问题标题】：Stack columns with flexbox - 2 columns on mobile screen, 3 columns on large screen使用 flexbox 堆叠列 - 移动屏幕上 2 列，大屏幕上 3 列
【发布时间】：2020-09-10 01:16:31
【问题描述】：

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

https://jsfiddle.net/kwxj83v6/6/

在大屏幕上可以正常工作，但在小屏幕上无法正确渲染。

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

谢谢

【问题讨论】：

标签： css bootstrap-4 flexbox grid flexboxgrid

【解决方案1】：

col-xs-6 从现在开始不能与引导程序一起使用。您可以使用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>

【讨论】：

我只是忘记在col-lg-4col-md-6 之间添加空格，刚刚编辑它，它工作正常。

【解决方案2】：

在引导程序 4 中 col-xs-* 更新为 col-* 可以参考文档https://getbootstrap.com/docs/4.2/layout/grid/#grid-options

这里你可以根据你的要求使用 col-6 或 col-sm-6

而且这个引导备忘单也有助于快速参考。 https://hackerthemes.com/bootstrap-cheatsheet/

【讨论】：

【解决方案3】：

Bootstrap CSS 的一部分如下：

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

这可确保在大于 992 像素的屏幕上，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%;
    }
}

【讨论】：