我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
我也面临着同样的问题;下面的方法对我很有效。
<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之间渲染一些空间。
其他回答
环绕元素的白色边框
.padding-pls{
border-left: 13px solid white;
border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
border-right: 0px solid white;
}
第一个+最后一个孩子没有边界
<div class="row">
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
</div>
在最新的引导版本中，您可以使用“卡片”
引导4
文档说(这里):
行是列的包装器。每个列都有水平填充(称为沟槽)，用于控制它们之间的空间。然后在具有负边距的行上抵消此填充。通过这种方式，列中的所有内容在视觉上都在左侧对齐。
所以正确答案是:设置cols' padding-left/right = - row's margin-left/right。那么简单。
#my-row {
margin-left: -80px;
margin-right: -80px;
}
#my-col {
padding-left: 80px;
padding-right: 80px;
}
演示:https://codepen.io/frouo/pen/OqGaWN
引导4 -使用嵌套行分离列。
<div class="container">
<div class="row bg-info p-3">
<!-- left column -->
<div class="col-8 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
<!-- right column -->
<div class="col-4 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
</div>
</div>
创建一个类并使用:
利润率:1.5em .5em; Max-width: calc(50% - 1em)!important;
其中max-width上的1em等于左右边距的总和。
