0

我正在尝试将我的 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>

谢谢

大屏幕 超小屏幕

4

3 回答 3

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%;
    }
}
于 2020-05-23T06:02:30.073 回答
1

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

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

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

于 2020-05-23T06:12:59.290 回答
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>

于 2020-05-23T06:20:50.230 回答