CSS 边框仅在某些 div 上

Question

我想为除行中的最后一个之外的所有 div 获得右侧边框，其中行列数通过依赖于设备的引导网格系统可变。

4、3、2 或 1 列。

如果我有 4 列，那么只有前 3 列会有右边框。 如果我有 3 列，那么只有前 2 列会有右边框。 等等。

rg-product-container {
  border-bottom: 1px solid #eee;
  min-height: auto;
  padding: 30px;
}

.rg-product-container:nth-child(1n+1) {
  border-right: 1px solid #eee;
}

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
  <!-- ... More dynamically generated HTML -->
</div>

作为参考，我创建了这张照片，上面的 CSS 呈现如下图所示的结果。我要消除的是照片中显示的红色边框。问题是它是基于引导网格的变量。

Answer 1

outline结合overflow:hidden行就可以了

.rg-product-container {
  outline: 1px solid red;
  padding: 30px;
}

.row {
  overflow:hidden;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 rg-product-container">STUFF HERE</div>
  </div>
</div>

Answer 2

如果您想排除边框的最后一个子行，您可以简单地使用last-of-type 选择器。试试这个 CSS 代码。

rg-product-container{
    border-bottom:1px solid #eee;
    min-height:auto;
    padding:30px;
}
.rg-product-container {
    border-right: 1px solid #eee;
}
.rg-product-container:last-of-type{
    border-right: none;
}