【问题标题】:Divide a column into 2 parts in Bootstrap 3在 Bootstrap 3 中将一列分为两部分
【发布时间】:2014-11-15 08:32:19
【问题描述】:

我正在使用类“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>

谢谢,

【问题讨论】:

标签: html css twitter-bootstrap-3


【解决方案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 */;}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-04-10
    • 2016-05-08
    • 1970-01-01
    • 1970-01-01
    • 2014-07-25
    • 1970-01-01
    • 1970-01-01
    • 2014-11-05
    相关资源
    最近更新 更多