Question

我有一个需要12个Bootstrap列的div。如何在左边的一列和一半列上添加一半列的边距？

这是一个起点。

HTML：

<div class="row">
  <div class="col-md-12 takes12Columns">
    DIV WHICH TAKES 12 COLUMNS
  </div>
</div>

的CSS：

.takes12Columns
{
  background: red;
  text-align: center;
}

Answer 1

使用标准Bootstrap无法做到这一点。您可以创建包含24列的自定义构建，也可以创建自定义行类以添加等于1/2列单位8.33333％的边距。然后减去row的正常负边距。

.row-custom {
  margin-left: calc(4.166666% - 15px);
  margin-right: calc(4.166666% - 15px);   
}

此外，row应始终放在container内。

Answer 2

如果你使用bootstrap，你可以使用container-fluid或简单container类在列的一侧进行更改，在上面的情况下你可以使用margin-right或margin-left，请参阅< / p>