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

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，然后像这样调整列填充...

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

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

table_201811

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就是这样解决这个问题的。