引导导航栏上的一排

Question

我开发与引导，什么我想实现一个网页是这样的画面：

我最初的想法是有一个导航和一旁的元素，这将是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

引导乐高积木一样的想......每块服务的目的。你正在处理两个截然不同的“块”（和他们的行为）。网格和导航栏。

哪里的东西在你提供的代码散架是，它试图使网格列像一个导航栏：... 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作为一个工作示例。