Bootstrap 4：获取卡片列中的最后一张卡片

Question

我正在使用 Bootstrap 4 构建一个砖石卡片组。 现在我有 3 列，其中有 3 张卡片。 是否可以处理每列的最后一张卡片？

我可以使用以下代码来处理牌组的最后一张牌：

card-columns div.card:last-of-type

但这是否也适用于每一列？

这是卡片组的代码：

<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="card-block card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-inverse card-primary p-3 text-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img img-fluid" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Answer 1

这将是问题的动态解决方案，具有给定的 HTML 结构。

.card-columns div.card p:last-child {
  background: #ff0000;
}

<div class="card-columns">
  <div class="card">
    <p>The first paragraph of div 1.</p>
    <p>The second paragraph of div 1.</p>
    <p>The third paragraph of div 1.</p>
    <p>The fourth paragraph of div 1.</p>
  </div>
  <div class="card">
    <p>The first paragraph of div 2.</p>
    <p>The second paragraph of div 2.</p>
    <p>The third paragraph of div 2.</p>
    <p>The fourth paragraph of div 2.</p>
  </div>
</div>

Answer 2

我找到了解决办法：

.card-columns div.card:nth-child(3n)

这会得到每列的最后一张卡片