带背景的引导列之间的间距答案

【问题标题】：Spacing Between Bootstrap Columns with Backgrounds带背景的引导列之间的间距
【发布时间】：2015-01-31 11:12:09
【问题描述】：

我正在尝试构建一个像这样的网格：

但是，由于列使用填充而不是边距，所以当我添加背景颜色时，列最终会接触。

我可以在每列中添加另一个 div 并在其上设置背景，但我已经不喜欢 Bootstrap 所需的所有添加标记。有没有一种简洁的方法可以在不添加十几个额外元素的情况下完成此任务？

编辑：

为了澄清，网格就像一个 col-4，col-8...然后在 col-8 内是 3 个 col-4...

JSFiddle Link
JSFiddle Link w/Wells（不喜欢 bg 的额外标记）

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="well well-sm">Left Top</div>
            <div class="well well-sm">Left Bottom</div>
        </div>
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-4">
                    <div class="well well-sm">Left/Middle</div>
                </div>
                <div class="col-sm-4">
                    <div class="well well-sm">Right/Middle</div>
                </div>
                <div class="col-sm-4">
                    <div class="well well-sm">Right Top</div>
                    <div class="well well-sm">Right Bottom</div>
                </div>
            </div>
            <!--end row-->
        </div>
    </div>
    <!--end row-->
    <div class="row">
        <div class="col-sm-12">Other content...</div>
    </div>
    <!--end row-->
</div>

【问题讨论】：

标签： html css twitter-bootstrap grid

【解决方案1】：

您必须使用 Bootstrap 发挥创意。如果您想要更简单的方法，我建议使用panels 或wells。

<div class="col-md-3">
  <div class="well well-sm">
  Content goes here
   </div>
</div><!--end col-->

Example Here

【讨论】：

谢谢，但这实际上正是我担心我不得不做的事情......在列中添加一个 div 只是为了添加一个 bg 颜色。此外，这更符合我想要完成的网格。 jsfiddle.net/9rpxq84o/2 只是不喜欢所有额外的标记。 ://

【解决方案2】：

除了表单之外，Bootstrap 中的大多数东西确实不需要添加太多标记。

演示：https://jsbin.com/punazu/1/

为避免额外的内部元素，您可以这样做：

CSS

.mygrid > [class*="col-"]:before{
    content: '';
    position: absolute;
    background: #eee;
    display: block;
    top: 0;
    right: 15px;
    bottom: 0;
    left: 15px;
    z-index: -1;
    border-radius: 5px;
}

.mygrid > [class*="col-"]{
    padding:15px 30px;
    margin-bottom:10px;
}

HTML

<div class="container">

  <div class="row mygrid">

    <div class="col-sm-4">
      hello this is the content inside this column
    </div>

    <div class="col-sm-6">
      hello
    </div>

    <div class="col-sm-2">
      hello
    </div>    

  </div>

</div>

【讨论】：

谢谢，但这并不能解决我的问题，因为我必须使用嵌套列来构建图像中的网格。见这里：jsbin.com/yafizajuza/1

【解决方案3】：

我认为您的问题没有“干净”的解决方案。我们必须认为 Bootstrap 网格有助于为我们的内容设置容器，所以我个人认为将方面设置为像背景这样的行/单元格是一个坏主意。我更喜欢在 col-* 类中添加一个 div。

无论如何，如果您认为这一点意味着向您的 html 文档添加额外的标签，您可以为 Bootstrap 行设置新的单元格数量，并使用 col-offset-* 设置单元格之间的比例空间。如果您使用 Bootstrap 导入 Less 文件，您可以尝试将 @grid-columns 的值（默认值：12）更改为更高的数字，并使用 col-offset-* 类定义单元格之间的空间，如我之前所说。如果您正在导入 Bootstrap CSS，请尝试重新编译它，更改 http://getbootstrap.com/customize/ 中的此变量。

【讨论】：