引导：在列之间添加边距/填充空间 [英] Bootstrap: add margin/padding space between columns

问题描述

我试图在Bootstrap网格布局的列之间放置一些额外的边距/填充空间。我试过这个，但我不喜欢这个结果。这里是我的代码：

 < div class =row> 
< div class =text-center col-md-6> 
 Widget 1 
< / div> 
< div class =text-center col-md-6> 
 Widget 2 
< / div> 
< / div> 
  

我想添加 margin：10px 和填充：10px的。有些人建议用左拉和来将他们的课改为 col-md-5 拉到右，但它们之间的差距会过大。 简单地添加一个div在 col-md-6 中有你需要的额外填充。 col-md-6 是保持列完整性的'主干'，但您可以在其中添加其他填充。

 < div class =row> 
< div class =text-center col-md-6> 
< div class =classWithPad> Widget 1< / div> 
< / div> 
< div class =text-center col-md-6> 
< div class =classWithPad> Widget 2< / div> 
< / div> 
< / div> 
  

CSS

  .classWithPad {margin：10px;填充：10px的; } 
  




I'm trying to put some extra margin/padding space between columns on my Bootstrap grid layout. I've tried this but I don't like the result. Here is my code:

    <div class="row">
        <div class="text-center col-md-6">
            Widget 1
        </div>
        <div class="text-center col-md-6">
            Widget 2
        </div>
    </div>

I want to add margin: 10px and padding:10px. Some people suggest to change their classes to col-md-5 with pull-left and pull-right, but the gap between them will be too large.

解决方案

Simply add a div within col-md-6 that has the extra padding that you need. The col-md-6 is the 'backbone' to keep the column integrity, but you can add additional padding within it.

<div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div>

CSS

.classWithPad { margin:10px; padding:10px; }

这篇关于引导：在列之间添加边距/填充空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！