将引导程序 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 的内置导航栏组件，因为它实际上是围绕水平布局结构设计的，您将花费大量不必要的时间编写 CSS 来覆盖它或应用额外的类声明覆盖该行为。

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

.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 将其移动到浏览器窗口的右侧）。 height 设置为 100vh，即视口高度的 100%。

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