Bootstrap 3 Grid Overlapping Все остальное

Question

Я использую систему сетки (Bootstrap 3.3.4), чтобы попытаться сделать около четырех столбцов. Единственная проблема заключается в том, что сетка помещается в фоновом режиме. И нижний колонтитул просто сидит поверх всего в сетке. Вот jsFiddle, обратите внимание, как последний бит текста обрезается навигационной панелью внизу. Вот мой код:

<div class="jumbotron"> 
    <h1>Example page header</h1> 
</div> 

<div class="col-md-2"> 
    <div ng-repeat="category in main_business_categories"> 
     {{category}} 
    </div> 
</div> 
<div class="col-md-2"> 
    <p>column2</p> 
</div> 
<div class="col-md-2"> 
    <p>third</p> 
</div> 
<div class="col-md-6"> 
    <p>fourth</p> 
</div> 

<div class="navbar navbar-default navbar-fixed-bottom"> 
    <div class="container"> 
    <a href="https://github.com/JeremyCraigMartinez">Made with love by Jeremy Martinez</a> 
    </div> 
</div> 

Как я могу получить его туда, где все (верхний и нижний колонтитулы и текст в сетке) все на той же глубине. Прямо сейчас, сетка находится в фоновом режиме, и все остальное находится на переднем плане.

Answer 1

Сначала вы должны обернуть столбцы внутри .container или .container-fluid и .row: https://jsfiddle.net/bhbhv38f/2/

.navbar-fixed-bottom причина поведение вы описываете. Вы должны удалить этот класс, чтобы получить нижний колонтитул в конце вашего содержимого, см. https://jsfiddle.net/bhbhv38f/3/