Css 如何删除行开始/结束的左/右填充？

我有一排特定大小的卡片，它们之间有一个槽。问题是，在开始和结束行的每个卡的两侧也应用了槽。我需要起点和终点与父容器的边框对齐。我找不到合适的词来质疑这一点。我得到的最接近的人是生成静态网格并为第一个孩子添加css的人。我的网格理论上可以是0-9999999结果的任意位置。我需要每行中的第一个（左填充）和最后一个（右填充）没有相应的填充

示例代码

{{tile.title}}

如果一行中总是有三张卡，您可以使用CSS轻松地将第一张和第三张卡作为目标。但是，如果您有一个容器，其中可以在同一个容器中有许多卡片，并且行之间没有分隔符，那么您就必须对CSS进行一些处理

// This selector targets every third card starting with the first card.
.card:nth-child(3n-2) {
  margin-left: 0;
}

// This selector targets every third card starting with the third card.
.card:nth-child(3n) {
  margin-right: 0;
}

---

.

了解网格间距是如何创建的。从引导文档：

“行是列的包装。每列都有水平填充 （称为排水沟）用于控制它们之间的空间。这种填充物 然后在具有负边距的行上进行抵消…”

因此，将容器左填充设置为0，然后像这样调整列填充

.col-md-4:nth-child(3n) {
    padding-right: 0;
}

@media (max-width:768px) {
    .col-md-4 {
        padding-right: 0;
    }
}

演示：

...

添加边距：0-15px 0-15px；解决办法是使用容器。这就是流行服装店Zalando解决这个问题的方法。

我猜是它的填充，而不是边距，您需要为CSSrow inside container中的row类设置填充：0px。。并使用容器流体默认情况下，列之间的间距为30px，两端各15px，使其在起点和终点各占一半。是否希望开始和结束为0px？@temaniaf如果这没有删除行中最后一项的右边距，则只会更改容器行为。@RudyvanSloten-引导中列周围的间距（边距）是使用填充而不是边距创建的。这就是为什么说“删除页边空白”并不清楚的原因。此外，列应该放在

行

内，而不是

容器

内。它应该应用于更高级别。否，当窗口变薄时，每行的牌数减少。无需与第n个孩子玩。将排水沟两侧设置为负边距是解决方法。然后向我们展示并回答您自己的问题。这行不通。它将溢出并导致一个水平滚动条，或者您的右侧仍有一个空格。如果您向上滚动，您可以看到是我做的，但在接受我自己的答案时有一个等待计时器。它已经运行了，您可以在zalando.nl上查看任何产品网格视图，这就是我获得代码的地方。父容器（Bootstrap类。容器不是浏览器宽度）的左侧和右侧已经有一个空格，因为站点不是浏览器的全宽，除非mobile（在这种情况下，卡片垂直堆叠）@Zim的答案似乎更合适，使用像素对网站的响应性非常不利。@AIMEURAmin Zim的答案没有达到预期的结果，因此我不能凭良心将其作为当前答案的答案。当有人发布了一个工作答案，这是一个进步，我会很高兴地标记为这样。此外，gutter是一个30px的值，因此这本质上使引导对响应性不利。-15仅抵消此硬编码的30px值。

<div class="container pl-0">
    <div class="row">
        <div class="col-md-4" ng-repeat="tile in tiles">
            <div class="card mb-4 box-shadow">
                <img src="//placehold.it/500x200">
            </div>
        </div>
        ...
    </div>
</div>