我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
这将允许两列之间有一个空间，显然，如果你想改变默认宽度，你可以使用mixins来修改默认的引导宽度。或者，您可以使用内联CSS样式给出宽度。
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
其他回答
我必须弄清楚如何对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)
由于您正在使用Bootstrap，列间距属性将有助于实现。W3Schools Column-Gap for Bootstrap有关于如何使用它的文档。
CSS:
.col-gap {
column-gap: 2rem;
}
对于HTML，将类(col-gap)放在行div中。 但也要注意，这可能会影响col-md-6的间距(或其他大小)，因此为了补偿，需要减小每列的大小。 (即col-md-6 -> col-md-5，即使只有2列)
HTML:
//Row
<div class="row col-gap justify-content-center">
//Col 1
<div class="col-md-5 ms-3 card p-5">
<p>Div 1</p>
</div>
//Col 2
<div class="col-md-5 ms-3 card p-5">
<p>Div 2</p>
</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
在Bootstrap v5.0中，你可以用cssvariable设置gap:
.row {
--bs-gutter-x: 100px; // column-gap
--bs-gutter-y: 100px; // row-gap
}
创建一个类并使用:
利润率:1.5em .5em; Max-width: calc(50% - 1em)!important;
其中max-width上的1em等于左右边距的总和。
