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

vngu2lb8 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(131)

我正在尝试实现以下布局：

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类的组合。最接近的方法是在container上加上vh-100，但这样做的话，身体高度将等于100vh + navbar.height，这不是我想要的。我不需要任何卷轴。
当然，我可以尝试使用calc(100% - navbar.height)，但这有点奇怪。
所以我的问题是如何实现这种布局？
在最佳实践方法中，我是否应该将navbar包含在container中？

twitter-bootstrap

来源：https://stackoverflow.com/questions/74213882/correct-way-to-use-navbar-and-container-in-bootstrap

1条答案

按热度按时间

erhoui1w1#

好的，将所有内容都封装在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。
唯一的问题是它是否适合“最佳实践”？

赞(0）回复(0）举报 2022-12-07

我来回答

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

1条答案

相关问题

热门标签

最新问答