Bootstrap 4如何在行类中删除这些边距/填充[重复]答案

【问题标题】：Bootstrap 4 How to remove these margin/padding in the row class [duplicate]Bootstrap 4如何在行类中删除这些边距/填充[重复]
【发布时间】：2020-01-11 14:18:20
【问题描述】：

我喜欢 Bootstrap，但我既不是专家也不是前端开发人员，而且我总是遇到一个问题。见下图。

对于这个布局的行和列，我使用这个：

<div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
</div>

是否有任何实用程序类可以删除行首和行尾的这个空格？我想让第一列和最后一列与下面的红色框匹配。

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

在 Bootstrap 4 中你可以使用这个：

<div class="row">
    <div class="col-md-4 px-0">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4 px-0">...</div>
</div>

https://getbootstrap.com/docs/4.3/utilities/spacing/

https://getbootstrap.com/docs/4.3/layout/grid/#gutters

【讨论】：

【解决方案2】：

实用程序类有效，但它们使侧面元素更大。

我找到了解决此问题的方法。我用div.items-list 接受了所有东西，并为它设置了这个样式（很sass）

.items-list{
    [class^="col"]{
        padding-right: 30px;
        padding-left: 0;

        &:nth-child(2n){
            padding-right: 15px;
            padding-left: 15px;
        }

        &:nth-child(3n){
            padding-right: 0;
            padding-left: 30px;
        }
    }
}

【讨论】：