Bootstrap 5中如何将内部div与容器div底部垂直对齐？

问题描述 #

在以下Bootstrap 5代码中，id为div-in-right-div的div嵌套在id为right-div的div内，目前内部div与外部div顶部对齐。尝试为right-div添加align-bottom类、为div-in-right-div添加align-self-end类，均无法实现内部div与外部div底部垂直对齐的效果，需要做哪些修改？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
  <style>
    .custom-header {
      max-width: 1200px;
      margin: 0 auto;
      background-color: yellow;
    }

    .right-block ul.nav {
      display: flex;
      align-items: center;
      list-style: none;
      padding: 0;
    }

    .right-block ul.nav li {
      margin-left: 20px;
    }

    .right-block ul.nav li a {
      text-decoration: none;
      display: flex;
      align-items: center;
      position: relative;
    }

    .right-block ul.nav li .icon {
      font-size: 20px;
      margin-right: 5px;
    }

    /* Mobile-specific styling */
    @media (max-width: 767px) {
      /* ... Mobile styles ... */
    }

    /* Large screen specific styling */
    @media (min-width: 992px) {
      .right-block ul.nav li a::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: black;
        transition: all 0.3s ease;
      }

      .right-block ul.nav li a:hover::before {
        width: 100%;
      }
      
    }
  </style>
  <title>Bootstrap 5 Header Example</title>
</head>
<body>
  <header class="custom-header">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="left-block">
            <!-- Content for the left block -->
            <h3>Left Block</h3>
          </div>
        </div>
        <div class="col-md-4">
          <div class="central-block text-center">
            <!-- Content for the center block -->
            <h3>Central Block</h3>
          </div>
        </div>
        <div class="col-md-4 align-bottom" id="right-div">
          <div class="right-block align-self-end" id="div-in-right-div">
            <!-- Content for the right block -->
            <ul class="nav justify-content-end">
              <li>
                <a href="#">
                  <i class="bi bi-house icon"></i>
                  <span>Add</span>
                </a>
              </li>

              <li>
                <a href="#">
                  <i class="bi bi-person icon"></i>
                  <span>Login</span>
                </a>
              </li>
              
            </ul>
          </div>
        </div>
      </div>
    </div>
  </header>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

解决步骤 #

要实现内部div在外部div底部垂直对齐，核心是让外部div成为flex容器，因为align-self-end仅在flex父容器中生效。具体修改如下：

1. 修改外部div（right-div）的类：移除无效的align-bottom类，添加d-flex（将元素转为flex容器）和h-100（让容器高度占满父级row的高度，确保对齐效果可见）。
2. 保留内部div的align-self-end类：该类在flex容器中会自动将子元素对齐到容器底部。

修改后的右侧列代码片段：

<div class="col-md-4 d-flex h-100" id="right-div">
  <div class="right-block align-self-end" id="div-in-right-div">
    <!-- 原有内容保持不变 -->
    <ul class="nav justify-content-end">
      <li>
        <a href="#">
          <i class="bi bi-house icon"></i>
          <span>Add</span>
        </a>
      </li>

      <li>
        <a href="#">
          <i class="bi bi-person icon"></i>
          <span>Login</span>
        </a>
      </li>
      
    </ul>
  </div>
</div>

为什么之前的方法无效？ #

• align-bottom不是Bootstrap 5的内置工具类，添加后不会产生任何样式效果；
• align-self-end依赖父元素为flex容器（即拥有display: flex属性），之前的right-div是普通块级元素，所以该类无法生效；
• 添加h-100是为了让right-div的高度和row一致，否则容器高度仅由内部内容撑开，底部对齐的视觉效果不明显。

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