Bootstrap4中justify-content-center布局下<br>标签失效问题求助

嘿，我来帮你搞定这个问题！你遇到的<br>标签失效，本质是Bootstrap的.row默认是Flex容器，里面的<h1>元素会被当作Flex项目横向排列——Flex布局会忽略这类换行标签，而是根据Flex属性来排列子元素。下面给你几个靠谱的解决方案：

方法1：给每个标题添加.w-100类强制换行 #

Bootstrap的.w-100类会设置元素宽度为100%，让每个<h1>独占一行，自然实现换行效果：

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center text-center">
    <h1 style="font-size:4vw;" class="display-3 w-100"><b>Some text</b></h1>
    <h1 style="font-size:5vw;" class="display-3 w-100">{{key_words}} !</h1>
    <h1 style="font-size:4vw;" class="display-3 w-100">剩余文本...</h1>
  </div>
</div>

这里额外加了.text-center，让每个标题内部的文本居中，整体视觉效果更协调。

方法2：把所有标题包裹在一个容器内 #

把所有<h1>放到一个<div>里，让这个容器作为.row的唯一Flex子元素——容器内部是常规文档流，<br>就能正常生效了：

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <div class="text-center">
      <h1 style="font-size:4vw;" class="display-3"><b>Some text</b></h1><br>
      <h1 style="font-size:5vw;" class="display-3">{{key_words}} !</h1><br>
      <h1 style="font-size:4vw;" class="display-3">剩余文本...</h1>
    </div>
  </div>
</div>

这种方法保留了你原本用<br>换行的习惯，同时保证整体内容在容器中垂直水平居中。

方法3：用Flex垂直排列替代<br>（推荐） #

直接给.row添加.flex-column类，把Flex布局的方向从默认的横向改成纵向，子元素会自动垂直排列，完全不需要<br>标签：

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center flex-column text-center">
    <h1 style="font-size:4vw;" class="display-3"><b>Some text</b></h1>
    <h1 style="font-size:5vw;" class="display-3">{{key_words}} !</h1>
    <h1 style="font-size:4vw;" class="display-3">剩余文本...</h1>
  </div>
</div>

这是最符合Flex布局思维的做法，语义化更强，也更贴合Bootstrap的设计理念。

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