html - 删除边距底部的第 N 个子表达式在响应式中不起作用

Question

我想做的是创建一个 nth-child 表达式，以在桌面 View 中删除最后一行的边距底部，并在响应 View 中删除最后一项的边距底部，这里是一个示例，或者您可以检查<强> live demo here

HTML

<div id="wrapper">
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
</div>  <!-- end wrapper -->

CSS

.box{
    border: 1px solid  #DFDFDF;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
}

所以我尝试下面的代码:

.col-md-3:nth-last-child(-n+4) .box {
     margin-bottom: 0;
}

它在大 View 中完美运行，但在响应式 View 中显示时它不起作用。希望有人能给我建议。

Answer 1

您需要 @media 查询来执行此操作。

通常使用 .col-md-3:not(:nth-last-child(-n+4)) .box 选择器来设置 margin-bottom。它将选择除最后四个 div 之外的所有内容。

对于响应式 View ，使用 .col-md-3:not(:last-of-type) .box 选择器来设置 margin-bottom。这将选择除最后一个 div 之外的所有内容。

.col-md-3的宽度是使用JavaScript找到的，是991px。

关于 CodePen 的工作演示

.box{
  border: 1px solid  #DFDFDF;
  padding: 20px;
  text-align: center;
}
.col-md-3:not(:nth-last-child(-n+4)) .box {
  margin-bottom: 30px;
}

@media only screen and (max-width: 991px){
  .col-md-3:not(:last-of-type) .box {
    margin-bottom: 30px;
  }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
</div>  <!-- end wrapper -->