使用Bootstrap 4进行​​侧栏导航

Question

我想在页面左侧添加导航。此导航应具有页面的完整高度。

我尝试使用Bootstrap网格系统构建它。但在这种情况下，导航的宽度会增加很多。即使我仅使用col-1作为导航侧边栏。

我在网上搜索了一些示例，但找不到任何内容。

有人可以给我一个链接或提示吗？

这就是我想要建立的：

Answer 1

我确信这有一件事，但看起来好像 我是不正确的（但如果你发现它，请告诉我。）

我添加了两个类.col-sm-fixed，它们将宽度设置为与1列宽相同，但为了便于阅读，我们为其提供了max-width和min-width。

另一个是.flex-auto，它只是设置flex值的属性，这样无论多大，这个项目都会增长以填充行的空间。此外，我在行中添加了一个flex-nowrap（来自引导程序），以防止任何恶作剧发生，主要内容可能被推迟。

希望这能解决您的问题。否则请更新您的问题，我很乐意为您提供帮助。

修改

我发现引导程序等同于flex-auto，即col。

link here

＆＃13;

＆＃13;

.col-sm-fixed {
  flex: 0 0 8.333%;
  max-width: 250px;
  min-width: 100px;
}

.flex-auto {
  flex: 1 1 50%;
  min-width: 50%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row flex-nowrap">
    <div class="col bg-info">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item"><a class="nav-link active">Hi</a></li>
        <li class="nav-item"><a class="nav-link">Howdy</a></li>
      </ul>
    </div>
    <div class="col-11 pl-1 bg-warning">
      Main Content Here?
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;