为什么容器与我的侧边栏重叠_是<nav>？

Question

为什么液体容器会像这样重叠，但其他人不会这样 这是正确的，还是我错过了什么？看起来对我不对。

<nav class="nav flex-column float-left">
  {links}
</nav>

<div class="container-fluid"><!-- overlapping -->
  <div class="row"><!-- fine -->
    <div class="col"><!-- fine -->
      <main role="main"><!-- fine -->
      {content}
      </main>
    </div>
  </div>
</div>

https://jsfiddle.net/w3LwwxL7/

编辑：只是为了让您知道：我想要获得一个固定宽度的静态左侧边栏/导航（见图）。右边的一切都是主要内容。这就是为什么我没有使用col-1（nav）和col-11（main）的原因。希望这会有所帮助： - ）

Answer 1

为您的sidenav设置固定width并设置padding-left（相同数量的侧边栏宽度）

这是一个例子： https://jsfiddle.net/w3LwwxL7/3/