网格列未按预期换行

Question

我有以下 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.

这里可能有什么问题？

Answer 1

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

Answer 2

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>

Answer 3

您正在使用 col-xs-，但 Bootstrap 版本 4.x 中不存在它。所以小断点实际上是移动及以上定义的第一个。

如果您打算让 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.

Answer 4

我已经在“codepen.io”上测试了您的代码，并且工作正常。也许“jsfiddle”使用的“CDN”是某个未以适当方式呈现类的版本。无论您是使用“CDN”还是在电脑上下载文件（.js、.css 等），重要的是它们支持您正在使用的 Bootstap 版本。

网格列未按预期换行

Grid columns doesn't wrap as expected

css

twitter-bootstrap

bootstrap-4

bootstrap-grid