在Bootstrap 3中将一列划分为2部分

Question

我使用了一个类为“of lg-9”的div，在该div中有两列，每个列对应一个类“of 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 */;}