Question

我一直在使用Bootstrap 4中的新卡组组件，但有以下问题：

当使用2行的卡组时，边框将加倍，这意味着顶行（4）和底部（也是4）将在它们之间有一条额外的行。

        <div class="col-md-12">
      <div class="row">

      <div class="card-group">
        <div class="card">
          <div class="card-block">
            <h5 class="card-title">1</h5>
          </div>
        </div>
        <div class="card">
          <div class="card-block">
            <h5 class="card-title">2</h5>
          </div>
        </div>
        <div class="card">
          <div class="card-block">
            <h5 class="card-title">3</h5>
          </div>
        </div>
        <div class="card">
          <div class="card-block">
            <h5 class="card-title">4</h5>
          </div>
        </div>

      </div>
      <div class="card-group">
        <div class="card">
          <div class="card-block">
            <h5 class="card-title">1</h5>
          </div>
        </div>
        <div class="card">
          <div class="card-block">
            <h5 class="card-title">2</h5>
          </div>
        </div>
        <div class="card">
          <div class="card-block">
            <h5 class="card-title">3</h5>
          </div>
        </div>
        <div class="card">
          <div class="card-block">
            <h5 class="card-title">4</h5>
          </div>
        </div>


    </div>
  </div>

有谁知道如何正确应用这两行？

Answer 1

您不需要使用.card-group的额外标记。

列必须放在行内，反之亦然。
只设置一列.col-md-12是多余的，因为它意味着100％的宽度。
您应该使用.container或.container-fluid并将卡片直接放在那里，使用卡片组作为一行，因为.card-group有display: table;并且每张卡都有效在display: table-cell内，所以它将作为列。

以下是没有额外标记的示例： http://www.bootply.com/3Zb4ybq1iH

这就是Bootstrap网格的工作原理。

.container或.container-fluid的{{1}}水平填充，用于分隔浏览器边缘的内容。
当您需要将行划分为多个列时，可以使用0.9375rem类，其{em>（负）水平边距为.row 重置容器的填充。
但是每列都有-0.9375rem的水平填充，您再次将浏览器边缘分开，但现在每列都有。

有关grid system的一些提示，您可以在Bootstrap 3的文档中找到，这些提示也适用于Bootstrap 4。

行必须放在0.9375rem（固定宽度）或.container（全宽）范围内，以便正确对齐和填充。

使用行创建水平的列组。

内容应放在列中，只有列可能是行的直接子项。

通过指定要跨越的十二个可用列的数量来创建网格列。例如，三个相等的列将使用三个.container-fluid

Bootstrap 4 Card Group＆＃39; s

1 个答案: