Question

我有一个简单的page

我想要的是在行上分布列。是否可以在此方案中实现这一目标？我认为在单个w-100中使用row类来构建多列网格非常有用。不是吗？

Answer 1

如果您希望每行有4列，则将col-3类添加到div中。

<div class="container">
  <h3>Block #1</h3>
  <div class="row">
    <div class="col-3 item-card">
        Block #11
    </div>

    <div class="col-3 item-card">
        Block #12
    </div>

    <div class="col-3 item-card">
        Block #13
    </div>

    <div class="col-3 item-card">
        Block #14
    </div>

    <div class="w-100 divider"></div>
  </div>
</div>

Bootstrap网格系统正在使用十二列系统。这意味着每行共有12个单位。因此，每行有4列，则12/4 = 3

从Bootstrap Grid Layout中了解更多信息。

.divider {
  height: 1px;
  background-color: red;
}

CSS：四列宽度

1 个答案: