如何让Bootstrap页面header内的<hr>与上方内容更贴近？

问题原因 #

你使用position-absolute后<hr>消失，是因为绝对定位元素会脱离文档流，而你的<header>未设置position: relative，导致<hr>相对于页面根元素定位，大概率跑到了可视区域之外；另外Bootstrap的row类默认是display: flex，父元素无相对定位时，绝对定位的子元素极易出现位置异常。

更简单的解决方案（无需绝对定位） #

其实不用绝对定位就能轻松缩小<hr>与上方内容的间距，直接修改<hr>的上下边距即可——Bootstrap默认给<hr>添加了margin-top: 1rem和margin-bottom: 1rem，你可以把margin-top调小：

<header class="header row">
  <!-- 上方原有内容保持不变 -->
  <hr style="height:1px;color:#1968B2; margin-top: 0.25rem; margin-bottom: 0;">
</header>

如果想要间距更小，甚至可以把margin-top设为0，让<hr>完全贴合上方内容。

坚持使用绝对定位的处理方法 #

如果你一定要用绝对定位，需要给<header>加上position: relative，让<hr>相对于header定位，同时设置width: 100%保证它和header同宽，再通过top属性调整位置：

<header class="header row position-relative">
  <!-- 上方原有内容保持不变 -->
  <hr style="height:1px;color:#1968B2; position: absolute; top: 90%; width: 100%; margin: 0;">
</header>

这里的top: 90%可根据需求调整数值，比如top: calc(100% - 1px)能让<hr>精准贴在header底部。

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