创建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来覆盖它或应用其他类声明覆盖那种行为。

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

.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％。

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