Bootstrap中列外的半列宽度边距答案

【问题标题】：Half-column width margin outside column in BootstrapBootstrap中列外的半列宽度边距
【发布时间】：2017-07-28 02:40:20
【问题描述】：

我有一个包含 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;
}

【问题讨论】：

我不明白。 col-md-12 已经在 15 px 的左侧/右侧有填充。如果要添加边距，请使用margin-left、margin-right
@ZimSystem，对不起。我犯了一个错误。我的意思是边距，而不是填充。如果您查看 jsfiddle，您将能够得到我想要的。我想在半列之后开始div，在半列之前结束。
@ZimSystem，我应该在哪里添加边距？到行还是到 col-md-12？我不需要 15 像素，但正好是列的一半。它会在调整大小时动态变化。
一半的专栏没有意义亲爱的
@recoverymen，对我来说确实如此。但我怀疑，我的问题没有解决方案。我希望我的怀疑是错误的。

【解决方案1】：

如果您使用引导程序，您可以使用container-fluid 或简单的container 类在上述情况下对列的一侧进行更改，您可以使用margin-right 或margin-left 请参阅

【讨论】：

【解决方案2】：

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

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

另外，row 应始终放在container 中。

【讨论】：

为什么行总是应该在容器内？
"行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充。" __getbootstrap.com/css/#grid
感谢关注。