在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 */;}