如何用纯CSS实现Bootstrap栅格div仅相邻侧显示分隔边框

核心思路 #

完全靠原生CSS选择器的匹配规则实现，不需要修改原有栅格HTML结构，只在列与列、行与行的衔接位置加边框，从规则层面避开整组栅格的外围边框。

可直接复用的CSS代码 #

/* 列基础重置：提前铺设等宽透明边框，避免加实色边框时撑破原有栅格布局 */
.row > [class*='col-'] {
  border: 1px solid transparent;
}

/* 匹配所有存在左侧相邻元素的列，为其加上实色左边框 */
.row > [class*='col-'] + [class*='col-'] {
  border-left-color: #dcdfe6;
}

/* 适配多行栅格场景，匹配所有存在上侧相邻元素的列，为其实加上边框
   对应col-md-3每行4列的规则，其他列数按需调整nth-child参数即可 */
.row > [class*='col-']:nth-child(4n+5) {
  border-top-color: #dcdfe6;
}

无外围边框的实现原理 #

• 利用相邻兄弟选择器+的匹配特性，只会选中前面有同排兄弟节点的列，每一排的第一个列因为没有前置兄弟，永远不会触发左边框规则，自然不会在栅格最左侧生成外边框
• 左边框只加在相邻列的衔接位置，每一排最右侧的列后面没有同排兄弟，不会给右侧补加边框，自然不会在栅格最右侧生成外边框
• 上边框只加在换行后的首列上，第一排的列因为没有上一行的相邻节点，永远不会触发上边框规则，自然不会在栅格最顶部生成外边框
• 最后一排的列下方没有其他行的节点，不需要额外设置下边框，自然不会在栅格最底部生成外边框

内容的提问来源于stack exchange，提问作者Roy Berris