使用Bootstrap 5无法让div块上下排列的问题求助

问题根源：你给父容器加了d-flex类，Bootstrap的Flex布局默认是**横向（row）**排列子元素，所以所有子div会并排显示，<br>标签在Flex容器里不会生效——因为Flex布局会接管子元素的排列逻辑。

具体修改方案： #

• 给父容器添加flex-column类，将Flex的主轴方向改为垂直方向，子元素自然会上下排布
• 用Bootstrap的间距类（比如gap-3）代替<br>控制元素间距，更符合框架规范
• 保留原有的align-items-center（水平居中）和justify-content-center（垂直居中）类，保证整体在页面中居中

修改后的完整代码： #

CSS代码（无需改动）：

body {
    height: 100vh;
}

HTML代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/b7fb98327c.js"></script>

<div class="landing d-flex flex-column align-items-center justify-content-center h-100 gap-3" id="start">
    <div id="start-app">
      <p id="app-name" class="header h1">App Name</p>
    </div>
    <div>
      <label for="email" class="form-label">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div>
      <label for="pwd" class="form-label">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <div>
      <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Remember me
      </label>
    </div>
    <div>
      <p><i class="fa-solid fa-circle-play" id="start-icon"></i></p>
    </div>
  </div>

补充细节： #

• flex-column是Bootstrap原生类，专门用来切换垂直方向Flex布局，比自定义CSS更简洁
• gap-3的数字可按需调整（如gap-2、gap-4），对应不同的间距大小
• 父容器的h-100配合body的100vh，确保容器占满整个视口高度，这样justify-content-center才能实现内容垂直居中

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