在 Bootstrap 3 中将一列分为两部分

Question

我正在使用类“col-lg-9”的 div，在该 div 内有两列，每列都有一个类“col-lg-6”。它工作得很好，但问题是列之间没有边距。

为了直观地查看事物，我在主列中添加了灰色背景。注意蓝色和粉色列之间没有边距。

请看这张图片中的问题：

直播链接： https://dl.dropboxusercontent.com/u/35853519/basmaty-website/index.html

代码：

<div class="main col-lg-9">
    <div class="col-lg-6">

    </div>

    <div class="col-lg-6">

    </div>
</div>

谢谢，

Answer 1

您有不同的选择，但是，我建议您从所有选项的基本内容开始，即：

<div class="main col-lg-9 myHalfCol">
    <div class="col-lg-6">

    </div>

    <div class="col-lg-6">

    </div>
</div>

现在您可以定位 .myHalfCol 而不必担心影响任何其他 .col-lg-6 类

至于方法，您可以使用填充模型，将所有内容保留为只是在侧面添加一些填充，如下所示：

.myHalfCol .col-lg-6{padding:0 10px;}

保证金模型： 这里使用的是实际边距，因此需要注意宽度。

.myHalfCol .col-lg-6{width:48%; margin:0 1% /* or auto */;}