Question

我想要做的是创建一个nth-child表达式，以便在桌面视图中删除最后一行的margin-bottom，并在响应视图中删除最后一项的margin-bottom，这里是一个示例，或者您可以检查的 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;
}

它在大视图中完美地工作，但在响应视图中显示时它不起作用。希望有人能给我建议。

Answer 1

如果您想仅删除margin-bottom到最后一项，请不要在-n+4中使用nth-last-child，只使用1。

Answer 2

不确定这是不是你的意思。您可以尝试使用百分比。调整浏览器时，或者平板电脑/手机百分比可以更好地运行时，它们会重新调整为不同的大小。确切的像素占用了确切的空间，因为百分比占据了页面的百分比。

示例：

.box{
    padding: 5%;
}

Answer 3

不确定移动视图的最大宽度是多少，但您可以使用此功能。使用以下CSS：

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

@media screen and ( max-width: 600px ) {
  .col-md-3:nth-last-child(1) .box {
     margin-bottom: 0;
  }
}

Answer 4

您需要@media次查询才能执行此操作。

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

对于自适应视图，请使用.col-md-3:not(:last-of-type) .box选择器设置margin-bottom。这将选择除最后div之外的所有内容。

使用JavaScript width找到.col-md-3的{{1}}。

CodePen上的工作演示

＆＃13;

991px

＆＃13;

.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;
  }
}

＆＃13;

删除margin-bottom的第N个子表达式在响应中不起作用

4 个答案: