我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
这也是一种方法。请查看以下网址https://jsfiddle.net/sarfarazk/ofgqm0sh/
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="col-md-6">
<div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>
</div>
</div>
其他回答
在最新的引导版本中，您可以使用“卡片”
我也面临着同样的问题;下面的方法对我很有效。
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Some Content..
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Some Second Content..
</div>
</div>
</div>
这将自动在两个div之间渲染一些空间。
引导4，文件自定义。SCSS您可以添加以下代码:
$grid-gutter-width-base: 20px;
$grid-gutter-widths: ( xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
);
默认$grid-gutter-width-base: 30px;
使用bootstrap的.form-group类。你的情况是这样的:
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
这也是一种方法。请查看以下网址https://jsfiddle.net/sarfarazk/ofgqm0sh/
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="col-md-6">
<div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>
</div>
</div>
