引导导航和侧边栏在一行

Question

我正在使用 Bootstrap 开发一个页面，我想要实现的是如下图所示：

我最初的想法是有一个 nav 和 side 元素，它们将是 3 列和 9 列。但是，nav 和 side 不会并排浮动，而是从左上角开始并堆叠在一起。

我刚开始使用 Bootstrap，任何帮助都将不胜感激！

index.html

<div class="container-fluid">
    <div class="row">
        <nav class="col-sm-9 navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
            <!--  nav content here -->
        </nav>

        <aside class="col-sm-3">
         <!--  aside content here -->
        </aside>
   </div>
</div>

Answer 1

将 Bootstrap 想象成乐高......每个积木都有一个用途。您正在处理两个截然不同的“块”（及其行为）。网格和导航栏。

您提供的代码中的问题在于它试图使网格列表现得像导航栏：... class="col-sm-9 navbar ...

最好将页面构建为独立的块。首先是网格，然后是网格内的导航栏。示例：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-9">

      <nav class="navbar navbar-default">
        ...
      </nav>

      Rest of the content goes here...

    </div>
    <div class="col-sm-3">

      <asside>
        Logo
        Link, etc.
      </aside>

    </div>
  </div>
</div>

有关工作示例，请参阅此 JSFiddle。