Bootstrap 4如何在行类中删除这些边距/填充

Question

我喜欢Bootstrap，但我既不是专家，也不是前端开发人员，所以我总是遇到问题。参见下图。

对于这种布局的行和列，我使用以下方法：

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

在行的开头和结尾是否有任何实用程序类可删除此空间？我想使第一列和最后一列与下面的红色框匹配。

Answer 1

在Bootstrap 4中，您可以使用以下命令：

kp1[match.queryIdx].pt

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

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

Answer 2

实用程序类可以工作，但它们会使侧面元素变大。

我找到了解决该问题的方法。我用div.items-list拥抱了一切，并将样式设置为它（很无礼）

.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;
        }
    }
}