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

Question

我使用了一个带有类＆＃34; col-lg-9＆＃34;的div，在该div中有两列，其中有一个＆＃34; col-lg-6＆＃34;每一个人。它的效果很好，但问题是列之间没有余量。

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

请参阅此图片中的问题：

直播链接： 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 */;}