如何从引导列中去除最后一列的右边框和最后一行的底部边框

Question

我尝试选择第n个子元素来从引导列中删除最后一列的边框右侧和最后一行的边框底部，但都不起作用。请找到js fiddle代码

.col-xs-3 p:nth-child(-n+3) {
border-bottom: 1px solid #ff0000;
}
.col-xs-3 p:nth-child(3n+1) {
border-right: 1px solid #ff0000;
}
.col-xs-3 {
padding: 0
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
</div>
</div>

我想删除这个屏幕截图中的边框(https://prnt.sc/wjvuu8)请提出一些解决方案？

Answer 1

您可以按照以下方式进行操作：

.col-xs-3:nth-last-child(n+5) p {   /* skip the last 4 element and start for the fifth */
border-bottom: 1px solid #ff0000;
}
.col-xs-3:not(:nth-child(4n + 4)) p { /* don't select the last one of each row (each row contain 4 elements) */
border-right: 1px solid #ff0000;
}
.col-xs-3 {
padding: 0!important;
}
p {
margin:0!important;
padding:10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
<div class="col-xs-3">
<p>Stuff that fills this column</p>
</div>
</div>
</div>