我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
在Bootstrap v5.0中，你可以用cssvariable设置gap:
.row {
--bs-gutter-x: 100px; // column-gap
--bs-gutter-y: 100px; // row-gap
}
其他回答
用css添加一个与背景颜色相同的边框怎么样?我是新手，所以也许有一个很好的理由不这样做，但当我尝试它时，它看起来很好。
我必须弄清楚如何对3列做这个。我想绕过divs的角落，但无法获得空间的工作。我用了边距。在我的例子中，我认为90%的屏幕由div填充，10%的空白:
html:
<div class="row">
<div id="orange" class="col-md-4">
<h1>Orange Div</h1>
</div>
<div id="green" class="col-md-4">
<h1>Green Div</h1>
</div>
<div id="aqua" class="col-md-4">
<h1>Aqua Div</h1>
</div>
</div>
和CSS:
#orange {
background-color:orange;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width:30%;
}
#green {
background-color:green;
border-radius: 30px;
padding: 20px;
margin: 2.5% 0 0 0;
width:30%;
}
#aqua {
background-color:#39F;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width: 30%;
}
为了让它在移动设备上正确调整大小，我让CSS将宽度从30%更改为宽度:92.5%;在@media下(max-width:1023px)
使用左边距是正确的方法:
<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>
完美的作品
Bootstrap 5提供了一种使用g-*类添加cols间隙的更舒适的方法
<div class="container">
<div class="row g-2">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
</div>
文档:https://getbootstrap.com/docs/5.0/layout/gutters/
既然你在使用bootstrap，我猜你想让它有响应性。在这种情况下，你不应该使用固定的大小，例如'px'。
作为其他解决方案的变通方案，我建议将两列都设为“col-md-5”而不是“col-md-6”，然后在包含列的父元素“row”中，添加类“justice -content-between”，这将把空闲空间放在中间，就像你可以在bootstrap文档中检查的那样
当然，这个解决方案也适用于两列以上的调整“col-md-x”
希望能有所帮助;)
