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/

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

我认为，我需要使用保证金属性本身，但它会破坏适应性

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/

上观看

如何在引导列之间添加边距

1 个答案: