使用Bootstrap 5的Flex实现简单网站布局遇到问题求助

核心实现逻辑 #

• 最外层容器占满视口高度，采用垂直flex布局，让内部两行自动分配垂直空间
• 内容区开启flex-grow属性填充剩余高度，自身再用flex实现内容双向居中
• 底部栏设置固定高度，用flex实现内容右对齐+垂直居中

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎页</title>
  <!-- 引入Bootstrap5 CSS，可根据项目情况替换为本地文件路径 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- 最外层容器：占满全屏高度，垂直flex布局 -->
  <div class="d-flex flex-column min-vh-100">
    <!-- 第一行：填充剩余高度，内容双向居中 -->
    <div class="flex-grow-1 d-flex justify-content-center align-items-center">
      <h1>中间欢迎文字</h1>
    </div>
    <!-- 第二行：固定高度，内容右对齐垂直居中，可自行修改height值调整高度 -->
    <div class="d-flex align-items-center justify-content-end pe-3" style="height: 60px; background-color: #f8f9fa;">
      <span>右下角文字</span>
    </div>
  </div>
</body>
</html>

关键类说明 #

• min-vh-100：让容器最小高度等于当前视口的高度，保证页面占满全屏
• flex-column：将flex容器的主轴改为垂直方向，内部元素垂直排列
• flex-grow-1：让当前元素占用flex容器内的所有剩余空间，自动适配第二行的高度
• justify-content-center/justify-content-end：控制flex主轴方向的对齐，分别为居中、右对齐
• align-items-center：控制flex交叉轴方向的对齐，实现垂直居中
• pe-3：给底部栏加右侧内边距，避免文字贴边，可根据需求调整大小

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