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

Придумайте Bootstrap как Lego ... каждый блок служит цели. Вы имеете дело с двумя совершенно разными «блоками» (и их поведением). Сетка и панель навигации.

Где вещи разваливаются в коде, которую вы предоставили в том, что он пытается сделать столбец сетки ведет себя как навигационная панель: ... 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 для рабочего примера.