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/

Bootstrap 3 Grid Overlapping Everything

1 个答案: