如何在 Bootstrap 中使用 d-flex 时获得他 parent 的 div 高度

Question

问题是我希望导航菜单的边框高度为 100% div，但我真的不知道问题出在哪里。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class=" mt-5 border rounded h-100">
  <div class="d-flex flex-column navbar-dark bg-dark rounded-start float-start h-100">
    <div class=" flex-column px-2" style="">
      <ul class="navbar-nav justify-content-center me-auto mb-2 mb-lg-0 flex-column">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="logout.php">Logout</a>
        </li>

        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
  <div class=" d-flex flex-column content p-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lacus a sem hendrerit lobortis. Vestibulum vel nulla non velit rhoncus eleifend. Suspendisse molestie nec nisl cursus fringilla. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur
    non nunc in tellus vehicula volutpat molestie malesuada ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur
    non nunc in tellus vehicula volutpat molestie malesuada ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare.
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

Answer 1

你能检查一下下面的代码吗？希望它对你有用。您必须从 navbar-dark 中删除 height(h-100) 并请将 d-flex 给父元素。

请参考这个link：https://jsfiddle.net/yudizsolutions/1j87zkqb/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="d-flex  mt-5 border rounded h-100">
  <div class="d-flex flex-column navbar-dark bg-dark rounded-start float-start">
    <div class=" flex-column px-2" style="">
      <ul class="navbar-nav justify-content-center me-auto mb-2 mb-lg-0 flex-column">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="logout.php">Logout</a>
        </li>

        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
  <div class=" d-flex flex-column content p-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lacus a sem hendrerit lobortis. Vestibulum vel nulla non velit rhoncus eleifend. Suspendisse molestie nec nisl cursus fringilla. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur
    non nunc in tellus vehicula volutpat molestie malesuada ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur non nunc in tellus vehicula volutpat molestie malesuada
    ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare.
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

如何在 Bootstrap 中使用 d-flex 时获得他 parent 的 div 高度

How to get div height of his parent while using d-flex in Bootstrap

html

css

bootstrap-5