如何禁用每个第四个孩子的保证金权利

Question

我使用了引导程序类并添加了每个类.col-md-3{margin-right:5px}

<div class="row">
  <?php
          // here the query
         ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <div class="col-md-3">

    </div>
    <?php endwhile;?>
</div>

类col-md-3将无限循环。我要添加每个

.col-md-3:nth-child(4){margin-right: none;}

如何添加？有人帮我吗？

Answer 1

您可以使用此选择器:nth-child(4n)

.item {
  display: block;
}

.item:nth-child(4n) {
  color: red;
}

<span class="item">Text</span>
<span class="item">Text</span>
<span class="item">Text</span>
<span class="item">Text</span>
<span class="item">Text</span>
<span class="item">Text</span>
<span class="item">Text</span>
<span class="item">Text</span>
<span class="item">Text</span>

Working JSFiddle Example

Answer 2

您可以将.col-md-3:nth-child(4n)写入样式CSS。

.col-md-3:nth-child(4n) {
  margin-right: 5px;
}

<div class="row">
  <?php
          // here the query
         ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <div class="col-md-3">

    </div>
    <?php endwhile;?>
</div>