网格列未按预期换行答案

【问题标题】：Grid columns doesn't wrap as expected网格列未按预期换行
【发布时间】：2020-07-11 22:26:35
【问题描述】：

我有以下 bootstrap-4 列结构：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4">A</div>
    <div class="col-xs-6 col-sm-4">B</div>
    <div class="col-xs-6 col-sm-4">C</div>
  </div>
</div>

根据屏幕大小的预期列布局是：

XS：

[  A ]
[B][C]

SM 及以上：

[A][B][C]

但是，在 XS 中，每个 div 都采用这样的全宽：

[A]
[B]
[C]

查看JSFiddle snippet here.

这里有什么问题？

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 bootstrap-grid

【解决方案1】：

col-xs-* 在 Bootstrap 上根本不存在

网格选项是：

col-*
col-sm-*
col-md-*
col-lg-*
col-xl-*

^{苏克雷：https://getbootstrap.com/docs/4.0/layout/grid/#grid-options}

所以你想使用的可能是col-*

.row {
  background: #E2E2E2;
}

.card {
  border: solid 1px #6c757d;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          A
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          B
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          C
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

是的！基本上一样的答案^^

【解决方案2】：

您正在使用col-xs-，但它在 Bootstrap 版本 4.x 中不存在。所以小断点其实是第一个定义的mobile and up。

如果你打算让B&C在手机上缩小一半，我建议编程like this:

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    A
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    B
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    C
                </div>
            </div>
        </div>
    </div>
</div>

如果没有，move the breakpoint 的 sm 到 md。

【讨论】：

【解决方案3】：

将“div class row”移到下面一行将解决您的问题。

【讨论】：

【解决方案4】：

我已经在“codepen.io”上测试了您的代码，并且运行良好。也许“jsfiddle”使用的“CDN”是某个没有以适当方式呈现类的版本。无论您是使用“CDN”还是在您的电脑上下载文件（.js、.css 等），它们都支持您使用的 Bootstap 版本，这一点很重要。

【讨论】：