Bootstrap 导航和侧边栏在一行

Question

我正在开发一个带有 Bootstrap 的页面，我想要实现的是如下图所示的内容：

我最初的想法是有一个 nav 和 aside 元素，它们将是 3 和 9 列。然而，nav 和 aside 并没有相邻浮动，而是从左上角开始并堆叠在一起。

我刚开始 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 想象成乐高积木……每个积木都有其用途。您正在处理两个截然不同的 "blocks" （及其行为）。网格和导航栏。

您提供的代码中的问题在于它试图使网格列的行为类似于导航栏：... 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 以获取工作示例。

Bootstrap 导航和侧边栏在一行

Bootstrap navigation and sidebar on one row

navigation

sidebar

twitter-bootstrap