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

Question

我有一排特定大小的卡片，它们之间有一个排水沟。问题是，排水沟也适用于每张卡片的开始和结束行的两侧。我需要开始和结束都与父容器的边框对齐。我找不到合适的词来查询这个。我得到的最接近的是生成静态网格并为第一个孩子添加 css 的人。我的网格理论上可以是 0-99999999 结果之间的任何地方。我需要每行中的第一个（左填充）和最后一个（右填充）没有相应的填充。

示例代码

<div class="container">
    <div class="row">
        <div class="col-md-4" ng-repeat="tile in tiles">
            <div class="card mb-4 box-shadow">
                <img ng-src=" {{ tile.image }} ">
                <p>{{ tile.title }}</p>
           </div>
        </div>  
    </div> 
</div>

结果

| [card] [card] [card] |
| [card] [card] [card] |

期望的结果

|[card] [card] [card]|
|[card] [card] [card]|

Answer 1

了解如何创建网格间距。来自 Bootstrap 文档：

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

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

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

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

演示：https://www.codeply.com/go/dvPRr13Wev

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

Answer 2

如果总是连续出现三张卡片，您可以使用 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;
}

Here's a good resource explaining the :nth-child() pseudo selector in more detail.

Answer 3

添加边距：0 -15px 0 -15px;容器是解决方案。这就是流行的服装店 Zalando 解决这个问题的方式。