前端：如何构建贯穿整页高度的垂直分隔线？

你要的是贯穿页面、匹配列边框的1px垂直分隔线，且要在内容上方但不影响用户交互。之前的代码视觉效果没问题，但绝对定位的容器会挡住下方内容的鼠标事件，解决办法很简单：

直接修改现有代码 #

给你的绝对定位容器添加Bootstrap自带的pointer-events-none类，这个类会让容器忽略所有鼠标交互，点击、hover等操作都会穿透到下方的内容元素上：

<div class="container-fluid position-absolute top-0 z-990 h-100 d-none d-md-block pointer-events-none">
   <div class="container h-100">
      <div class="row h-100">
         <div class="col-2 border-start border-end"></div>
         <div class="col-2 border-end"></div>
         <div class="col-2 border-end"></div>
         <div class="col-2 border-end"></div>
         <div class="col-2 border-end"></div>
         <div class="col-2 border-end"></div>
      </div>
    </div>
 </div>

原理说明 #

pointer-events: none是CSS属性，作用是让元素不再响应任何鼠标、触摸等指针事件，所有交互都会直接作用在它下方的元素上，完美解决你遇到的“视觉正确但无法交互”的问题。

如果Bootstrap的自带类没生效（比如自定义样式覆盖了），也可以自己写内联样式：

<div class="container-fluid position-absolute top-0 z-990 h-100 d-none d-md-block" style="pointer-events: none;">
<!-- 内部结构不变 -->
</div>

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