一行的Bootstrap导航和侧边栏

Question

我正在使用Bootstrap开发一个页面，我想要实现的是这样的图片：

我最初的想法是有一个导航和旁边的元素，这将是3和9列。然而，导航和旁边不会彼此相邻浮动，而是从左上角开始并堆叠在彼此之上。

我刚刚开始使用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

想想像Lego一样的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。