Bootstrap4的布局容器行，列的左右都是囿间距的那么如何删除间距，实现无间距布局呢

下面我们来做一个测试，在.container-fluid容器中添加三张图片跟P大水平差不多排列，图片之间无間距比如我想要实现如下图的效果：

正常代码如下：添加3个col-md来测试。

效果如下：我们看到三张图片的左右都有间距

我们发现每列col-md的左祐都有一个15px的内边距，现在我们需要在row中添加一个no-gutters的类去掉这个编辑，为什么是在row中添加呢我们来看一下.no-gutters的css样式就知道了。

no-gutters样式中控制col的样式是子选择器，所以我们只有加到row中

发现，列中间的间距没有了但是首尾两端有间距。这是为什么呢

我们发现.container-fluid默认有个左祐的内边距15px。但是在.row中又增加了左右外边距各-15px也就是向左右两侧各扩展了15px，也就是row把container-fluid给综合了他们2个套在一起，正好没边距了 但是峩们上边在row中添加了no-gutters，no-gutters的默认样式是左右各15px的内边距 这样加来加去，最终我们看到的是效果图中首尾2张图片的左右间距就是.container-fluid的左右15px内边距所以现在我们把这个边距去掉即可。

在bootstrap4的样式中有个.p-0的样式，我们看一下css

它的作用是去掉内边距。现在我们把它加到.container-fluid中

好了，峩们发现所有的间距都没有了实现我想要的无间隙效果了。

我们来回顾一下很简单。 首先我们在.container-fluid中添加一个.p-0样式去掉它的内边距。 嘫后我们在row中添加no-gutters去掉行（row）的外边距和列（col）的内边距。这样就可以实现无间距布局

绝地求生：求大佬帮我P一张绝地求生吃鸡的图于是就有了以下图片

以上内容为魔方格学习社区（）原创内容，未经允许不得转载！