Bootstrap 4行列不中断行

Question

我正在尝试创建一个引导网格，其中每一行都必须包含列，引导具有一个执行此操作的类row-cols- *，但是当我将示例放在website上的{{ 3}}不会像预期的那样中断行。我在做什么错了？

HTML：

<div class="container">
  <div class="row row-cols-2 text-white">
    <div class="col border bg-primary">Column</div>
    <div class="col border bg-primary">Column</div>
    <div class="col border bg-primary">Column</div>
    <div class="col border bg-primary">Column</div>
  </div>
</div>

Answer 1

External resources in JSFiddle (Adding Twitter Bootstrap CDN)

逻辑与您在编辑器（如Brackets）中进行设置时的逻辑相同。

尝试一下：

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Answer 2

.row-cols-*类是Bootstrap 4.4的新类：https://github.com/twbs/bootstrap/releases。您的问题可能是由于您引用的是Bootstrap的早期版本。至少您的jsfiddle正在这样做。

参考正确的Bootstrap 4.4文件可解决此问题：

演示： https://jsfiddle.net/davidliang2008/1Ltc9zos/1/