Bootstrap 4 如何在不超过空间的情况下在列之间设置边距 [英] Bootstrap 4 how to have margin between columns without going over space

查看：18
本文介绍了Bootstrap 4 如何在不超过空间的情况下在列之间设置边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建 3 列内容，每列内容之间留有一点边距，以便使用 shadow 使它们看起来不同.

但是，当我在左侧和中间列添加带有 mr-3 的边距时，这会使列超出空间的宽度并换行.

如何在卡片/列之间创建空间而不使它们越过可用空间?

https://codepen.io/anon/pen/KeYgvg

解决方案

如果您在列上设置边距，它将破坏"Bootstrap 网格.列(装订线)之间的间距是用填充创建的.因此，您应该在阴影的列内添加另一个容器/框，然后根据需要调整列填充:

 
<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 class=""><h4 class="">一些标题.</h4><p>一些测试文本 asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>

<!--//内容-->

<!--//项目--><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 class=""><h4 class="">另一个标题.</h4><p>一些测试文本 asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>

<!--//内容-->

<!--//项目--><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 class=""><h4 class="">还有一个标题.</h4><p>一些测试文本 asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>

<!--//内容-->

<!--//项目-->

https://www.codeply.com/go/aQBL68BvFU

I'm trying to create 3 columns of content with a bit of margin between each so that with shadow they look distinct.

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

解决方案

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆