Bootstrap 4.3.1添加row div后<hr>元素消失的解决咨询

我来帮你拆解一下这个奇怪的现象，核心原因其实和Bootstrap 4的.row类的布局逻辑有关：

Bootstrap 4里的.row是一个flex容器（默认display:flex），元素默认横向排列，还允许自动换行。当你直接把<hr>作为.row的直接子元素时，它会被当成一个flex item来处理：

• 首先，你的<header>是块级元素，作为flex item时默认会占满.row的全部宽度，所以<hr>会被挤到下一行；
• 其次，.row自带margin-left/-right: -15px的负边距，<hr>的默认宽度是100%，这就导致它的左右两端会超出.container的可视范围，再加上<hr>本身只有1px高，视觉上就像“消失”了一样。

而当你把<hr>和按钮包裹在<section>里时，<section>成了.row的一个flex item，它作为块级元素会默认占满.row的宽度，此时<hr>在<section>内部是普通的块级元素，宽度会自适应<section>的有效范围（也就是.container的宽度），所以就能正常显示了。

不使用<section>标签的解决方案 #

这里有几种符合Bootstrap规范的方法，你可以根据需求选择：

1. 用栅格列包裹元素（最推荐）

Bootstrap的.row本来就是和栅格列（.col-*）配合使用的，把每个元素放进.col-12（占满整行）里，就能让<hr>乖乖待在可视范围内：

<div class="container">
  <div class="row">
    <div class="col-12">
      <header class="text-center">
        <h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1>
      </header>
    </div>
    <div class="col-12">
      <hr>
      <button class="btn btn-primary btn-xl">Find out more</button>
    </div>
  </div>
</div>

2. 给<hr>添加flex属性让它占满宽度

如果希望元素保持横向排列的逻辑，可以给<hr>加flex-grow-1让它占据剩余空间，再用mx-3抵消.row的负边距避免溢出：

<div class="container">
  <div class="row">
    <header class="text-center">
      <h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1>
    </header>
    <hr class="flex-grow-1 mx-3">
    <button class="btn btn-primary btn-xl">Find out more</button>
  </div>
</div>

3. 把.row改成垂直排列

添加.flex-column类让.row内的元素垂直堆叠，这样<hr>就会作为普通块级元素正常显示：

<div class="container">
  <div class="row flex-column">
    <header class="text-center">
      <h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1>
    </header>
    <hr>
    <button class="btn btn-primary btn-xl">Find out more</button>
  </div>
</div>

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