问题描述
我正在尝试创建3列内容,每列之间留有一些余量,以便使用shadow
时它们看起来完全不同.
I'm trying to create 3 columns of content with a bit of margin between each so that with shadow
they look distinct.
但是,当我在左列和中间列中添加带有mr-3
的边距时,这会使列超出空间的宽度并自动换行.
However when I add some margin with mr-3
to the left and middle columns this makes the columns go beyond the width of the space and wrap.
如何在卡/列之间创建空间而不使它们超出可用空间?
How can I create space between the cards/columns without making them go over the available space?
https://codepen.io/anon/pen/KeYgvg
推荐答案
如果在列上设置边距,则会破坏" Bootstrap网格.列(装订线)之间的间距是使用填充创建的.因此,您应该在阴影的列内添加另一个容器/框,然后根据需要调整列的填充:
If you set margins on the columns it will "break" the Bootstrap grid. The spacing between the columns (gutter) is created with padding. Therefore, you should add another container/box inside the columns for the shadow, and then adjust the column padding as desired:
<div class="row">
<div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
<div class="shadow">
<div class="feature-icon pb-3">
<i class="fa fa-piggy-bank"></i>
</div>
<div class="">
<h4 class="">Some title.</h4>
<p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
</div>
<!--//content-->
</div>
</div>
<!--//item-->
<div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
<div class="shadow">
<div class="feature-icon pb-3">
<i class="fa fa-piggy-bank"></i>
</div>
<div class="">
<h4 class="">Another title.</h4>
<p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
</div>
<!--//content-->
</div>
</div>
<!--//item-->
<div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
<div class="shadow">
<div class="feature-icon pb-3">
<i class="fa fa-piggy-bank"></i>
</div>
<div class="">
<h4 class="">One more title.</h4>
<p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
</div>
<!--//content-->
</div>
</div>
<!--//item-->
</div>
https://www.codeply.com/go/aQBL68BvFU
这篇关于Bootstrap 4如何在不占用空间的情况下在列之间留出边距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!