在 Bootstrap 中使用导航栏和容器的正确方法答案

【问题标题】：Correct way to use navbar and container in Bootstrap在 Bootstrap 中使用导航栏和容器的正确方法
【发布时间】：2022-10-27 05:10:34
【问题描述】：

我正在尝试实现这种布局：

Body 的元素有两个子元素：navbar 和 container-md。我们的想法是让导航栏没有填充。在container 里面有三个项目，中间的一个应该填满所有的高度空间。

我使用这个html，但是it's not really working：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" />
    <title>Example 1</title>
  </head>
  <body>
    <!-- Navbar -->
    <nav class="navbar bg-dark">
      <div class="container-fluid">
        <span class="navbar-brand h1 text-white">Navbar</span>
      </div>
    </nav>

    <!-- Container -->
    <div class="container-md">
      <div class="d-flex flex-column">
        <div style="background-color: rgba(255, 0, 0, 0.1)">Topbar</div>
        <div style="background-color: rgba(0, 255, 0, 0.1)" class="flex-grow-1">
          Should fill all available space
        </div>
        <div style="background-color: rgba(0, 0, 255, 0.1)">Bottombar</div>
      </div>
    </div>
  </body>
</html>

我还尝试在 body 或 div.container 等元素上使用 min-vh-100 和 h-100 类组合。最接近的是将vh-100 添加到container，但这样做身体高度将等于100vh + navbar.height，这不是我想要的。我不需要任何卷轴。

当然我可以尝试使用calc(100% - navbar.height)，但这有点奇怪。

所以我的问题是如何实现这个布局？

我是否应该在最佳实践方法中将navbar 包含在container 中？

【问题讨论】：

如果将 height: 100% （或 h-100）添加到 html、body 和 .container-md 元素呢？
@Shoejep，然后container 是 100% 高度，而身体 - 100% + 导航栏。看起来我必须在某处添加flex-shrink: 0，但无法真正找到确切的位置。

标签： html css twitter-bootstrap

【解决方案1】：

好的，所以将所有内容都包含在 d-flex flex-column 中解决了它：

<html class="h-100"> <-- Add class here
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Example 1</title>
</head>
<body class="h-100">  <-- Add class here
    <div class="d-flex flex-column h-100">  <-- Add this wrapper
      <!-- Navbar -->
      <nav class="navbar bg-dark">
        <div class="container-fluid">
          <span class="navbar-brand h1 text-white">Navbar</span>
        </div>
      </nav>

      <!-- Container -->
      <div class="container-md d-flex flex-column h-100">
        <div style="background-color: rgba(255, 0, 0, 0.1)">Topbar</div>
        <div style="background-color: rgba(0, 255, 0, 0.1)" class="flex-grow-1">
          Should fill all available space
        </div>
        <div style="background-color: rgba(0, 0, 255, 0.1)">Bottombar</div>
      </div>
    </div>
  </body>
</html>

另请注意，您还必须将h-100 用于html 和body。

唯一的问题是它是否适合“最佳实践”？

【讨论】：