html - 在 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;}

margin 模型:此处使用实际边距，因此需要注意宽度。

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