html - 如何在 Bootstrap 列之间添加边距

Question

How do I add a margin between bootstrap columns without wrapping 可能重复，但我无法将此解决方案应用于我的情况。这是我的 html:

<div class="container">
  <div class="row">
    <div class="col-xs-6">
        left block
    </div>
    <div class="col-xs-6">
        right block
    </div>
  </div>
</div>

和CSS:

.container{
    margin: 10px
}
.col-xs-6{
   -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
   -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
   padding: 15px;
}

并链接到 jsfiddle:http://jsfiddle.net/sujdtsLa/3/

我有两个带阴影的 block ，我需要有一个边距，当我将它们包装到 div 中并添加填充时，填充刚刚应用，但 block 仍然彼此靠近。

我想，我需要使用margin属性本身，但是它会破坏适应性

Answer 1

你也可以试试 jQuery-solution

var xs_6_blocks = $('.col-xs-6');
if (xs_6_blocks.length) {
    var xs_6_block = xs_6_blocks.eq(0), // get first block
        block_old_width = xs_6_block.outerWidth(), //get its real width
        margin = 20, // choose margin value
        block_new_width = block_old_width - (margin / 2); //calc new width of blocks
    xs_6_blocks.each(function(i) {
        var item = $(this);
        item.css('width', block_new_width); //apply new width to each block
        if (!i % 2) {
            //and if the block is odd (blocks are zero-based, so even for real)
            item.css('margin', '0 ' + margin + 'px 0 0'); //apply margin
        }
    });
}

在 jsfiddle 上观看 http://jsfiddle.net/bwzLf83c/2/