【问题标题】：Sidebar navigation with Bootstrap 4Bootstrap 4 的侧边栏导航
【发布时间】：2017-10-23 17:43:16
【问题描述】：

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

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

这就是我想要构建的：

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我确信这是有原因的，但看起来好像我错了（如果你发现了，请告诉我）。

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

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

编辑

我找到了 flex-auto 的 bootstrap 等效项，即 col。

link here

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

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

<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>

【讨论】：