Bootstrap 4如何在不占用空间的情况下在列之间留出边距 [英] Bootstrap 4 how to have margin between columns without going over space

问题描述

我正在尝试创建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如何在不占用空间的情况下在列之间留出边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！