我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
引导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>
其他回答
你可以使用带有边框属性的背景剪辑和盒子模型
.box{
box-sizing: border-box;
border: 3px solid transparent;
background-clip:padding-box;
}
<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>
创建一个类并使用:
利润率:1.5em .5em; Max-width: calc(50% - 1em)!important;
其中max-width上的1em等于左右边距的总和。
您可以使用此处文档中的col-md-offset-*类来实现列之间的间距。间距是一致的，这样所有的列都能正确对齐。为了获得均匀的间距和列大小，我将执行以下操作:
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
在Bootstrap 4中使用:offset-2或offset-md-2
简单的方法
.row div{
padding-left: 8px;
padding-right: 8px;
}
我不认为你能做到这与Bootstrap单独。列与列之间的空间会自动添加/维护。 如果你需要在列之间添加一个特定的宽度，你可以做这个技巧来模拟空间:https://jsfiddle.net/loginet/3rogbh9s/5/
<div class="row">
<div class="col-6">
<div class="left-column">Left column</div>
</div>
<div class="col-6">
<div class="right-column">Right column</div>
</div>
</div>
和CSS
.left-column {
padding: 10px;
padding-right: 50px;
background: white;
}
.right-column {
padding: 10px;
padding-left: 50px;
background: white;
}
