Bootstrap 3 网格重叠一切

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/