正在创建 bootstrap 4 右侧导航栏高度为 100%

Question

下面是我的 Bootstrap 4 导航栏代码，我在其中尝试将右侧导航栏高度创建为 100%。

<nav class="navbar navbar-expand-sm bg-light navbar-light"
            style="width: 200px; float: right;">
  <ul class="nav flex-column">
    <li class="nav-item active">
      <a class="nav-link" href="#">Sports</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Facebook</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Youtube</a>
    </li>
  </ul>
</nav>

我也试过 height: 100%; , navbar-full 到 <nav> 但它不再起作用了。

看图：

任何帮助将不胜感激！

Answer 1

我可能不会为此依赖 Bootstrap 的内置 Navbar 组件，因为它实际上是围绕水平布局结构设计的，您将花费大量不必要的时间编写 CSS 覆盖该行为或应用额外的 class 声明来覆盖该行为。

如果您省略该组件，尽管您可以用最少的努力获得非常相似的结果：

.navbar-right {
  height: 100vh;
  right: 0;
  position: absolute;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<nav class="navbar-right bg-light p-3">
  <ul class="nav flex-column">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
  </ul>
</nav>

position:absolute 将您的导航从正常的文档流中拉出来，允许您将其放置在任何位置（right:0 将其移动到浏览器的右侧 window）。 height 设置为 100vh，即视口高度的 100%。

现在这是一个非常简单的示例。您可能希望应用特定的宽度，特别是考虑到关键断点。但它应该能让你走上正确的道路。

正在创建 bootstrap 4 右侧导航栏高度为 100%

Creating bootstrap 4 right side navbar height to 100%

html

css

nav

twitter-bootstrap

bootstrap-4