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 构建这样一个 sidebar/table 内容的正确方法是什么？

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 断点下。

---

您可以阅读有关垂直导航的更多信息here, and the grid system here。