时间戳

首页 > 解决方案 > CSS 边框仅在某些 div 上

html - CSS 边框仅在某些 div 上

问题描述

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

4、3、2 或 1 列。

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

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 呈现如下图所示的结果。我要消除的是照片中显示的红色边框。问题是它是基于引导网格的变量。

在此处输入图像描述

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

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>

推荐阅读