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

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

(3/12)

基本上我们正在制作一个网格，导航使用屏幕的其余部分获取屏幕的1/4 col-3和内容。

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

您可以详细了解垂直导航here和网格系统here。