我有两列:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
我怎么在它们之间加一个空格?
输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。
如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。
当前回答
由于您正在使用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>
其他回答
这将允许两列之间有一个空间，显然，如果你想改变默认宽度，你可以使用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)
创建一个类并使用:
利润率:1.5em .5em; Max-width: calc(50% - 1em)!important;
其中max-width上的1em等于左右边距的总和。
为了获得列之间特定宽度的间距，我们必须在标准Bootstrap的布局中设置填充。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); /* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */ @media (min-width: 992px) { .space-100-px > .row > .col-md-6:first-child { padding: 0 50px 0 0; /* The first half of 100px */ } .space-100-px > .row > .col-md-6:last-child { padding: 0 0 0 50px; /* The second half of 100px */ } } /* The result will be easier to see. */ .space-100-px img { width: 100%; height: auto; } <div class="container-fluid space-100-px"> <div class="row"> <div class="col-md-6"> <img src="http://placehold.it/450x100?text=Left" alt="Left"> </div> <div class="col-md-6"> <img src="http://placehold.it/450x100?text=Right" alt="Right"> </div> </div> </div>
在最新的引导版本中，您可以使用“卡片”
