css：四列宽

Question

我有一个简单的page

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

Answer 1

如果您希望每行有 4 列，请将 col-3 class 添加到您的 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：四列宽

css: four column width

css

twitter-bootstrap-3

css-multicolumn-layout