侧边栏的 Twitter Bootstrap 文档中使用了什么组件？

Question

我想知道使用 Bootstrap 4 构建这种侧边栏的最简单方法是什么。

对我来说，它看起来像是他们为文档页面构建的自定义组件，没有包含在框架中。我不确定我是否正确。

<ul class="nav bd-sidenav">
  <li class="active bd-sidenav-active">
    <a href="/docs/4.0/getting-started/introduction/">
      Introduction
    </a>
  </li>
  <li>
    <a href="/docs/4.0/getting-started/download/">
      Download
    </a>
  </li>
   ...
</ul>

我得到的最接近的是通过创建这样的东西：

<ul class="nav">
  <li class="w-100">
    <a href="#">
      Item 1
    </a>
  </li>
   ...
</ul>

但我认为应该有更好的方法。

使用 Bootstrap 4 构建这样的侧边栏/目录的正确方法是什么？

Answer 1

这是一个简单的导航侧边栏，内容位于右侧：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-3">
      <nav class="nav flex-column">
        <a class="p-1 nav-link active" href="#">Active</a>
        <a class="p-1 nav-link" href="#">Link</a>
        <a class="p-1 nav-link" href="#">Link</a>
        <a class="p-1 nav-link disabled" href="#">Disabled</a>
      </nav>
    </div>
    <div class="col bg-light">
      Here's your content! Added class bg-light for a light gray background.
    </div>
  </div>
</div>

基本上，我们正在制作一个网格，其中导航占据屏幕的 1/4 (3/12)，内容使用屏幕的其余部分。

如果您希望导航堆叠在较小的屏幕上，您可以替换col-3为col-sm-3例如。在这种情况下，导航将堆叠在sm断点下方。

您可以在此处阅读有关垂直导航的更多信息，以及在此处阅读有关网格系统的更多信息。