在Bootstrap 3中将列分为2部分 [英] Divide a column into 2 parts in Bootstrap 3

问题描述

我使用一个类col-lg-9，在div里面有两列，每个列有col-lg-6。它工作良好，但问题是列之间没有边距。

为了看到的东西，我已经添加了灰色背景到主列。请注意蓝色和粉红色列之间没有边距。

请参阅此图片中的问题：

Live link：
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>感谢，
解决方案   / div> 
你有不同的选择，但是，我建议你从一个基本的东西开始所有选项，这是：
 < 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 * /;} 
  
 
I'm using a div with class "col-lg-9", inside that div there are two columns with a class of "col-lg-6" for each one. it works good but the issue is that there is no margin between the columns.

To see things visually, I've added a grey background to the main column. Notice how is no margin between the blue and the pink columns.

Please see the issue in this pic:


Live link:
https://dl.dropboxusercontent.com/u/35853519/basmaty-website/index.html

The code:
<div class="main col-lg-9">
    <div class="col-lg-6">

    </div>

    <div class="col-lg-6">

    </div>
</div>
Thanks,
解决方案
You have different options, however, I'd recommend you to start with a basic thing for ALL options, which is this:
<div class="main col-lg-9 myHalfCol">
    <div class="col-lg-6">

    </div>

    <div class="col-lg-6">

    </div>
</div>
Now you can target .myHalfCol without worrying about affecting any other .col-lg-6 class

As for approaches, you can use the padding model, leaving everything as is just adding some padding at the sides, like this:
.myHalfCol .col-lg-6{padding:0 10px;}
The margin model:
Here you use real margins, so you need to take care of width.
.myHalfCol .col-lg-6{width:48%; margin:0 1% /* or auto */;}


                        
这篇关于在Bootstrap 3中将列分为2部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！