Question

我正在尝试建立一个像：

的网格

enter image description here

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

我可以在'每列中添加另一个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>

Answer 1

你必须通过Bootstrap获得创意。如果您想要更简单的方法，建议您使用panels或wells。

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

Example Here

Answer 2

除了表单之外，Bootstrap中的大多数内容确实没有太多添加标记。

DEMO：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>

Answer 3

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

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

Bootstrap列与背景之间的间距

修改

3 个答案: