无法使用 Bootstrap 5 加载一个在另一个下的 div

Question

我正在尝试将

div's

一个放在另一个下面，并希望它位于页面的中心，但我的所有元素都彼此相邻排列，而不是一个在另一个下面。

body {
    height: 100vh;
}

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

<div class="landing d-flex align-items-center justify-content-center h-100" 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>
    <br><br>
    <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>

我希望

divs

将一个放在另一个下面。现在它们都在彼此相邻地形成。

<br>

似乎也没有帮助。

Answer 1

您需要将

flex-column

添加为班级。您可以在这里阅读更多信息：https://getbootstrap.com/docs/5.0/utilities/flex/#direction

（我删除了

height: 100vh

，否则内容不合适）

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

<div class="landing d-flex align-items-center justify-content-center h-100 flex-column" 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>
    <br><br>
    <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>