jquery - Bootstrap如何将页面分成三部分

Question

我正在尝试制作主题布局。它将有一个顶部栏、一个内容栏和一个底部栏。所以没有一个必须与另一个重叠。

这是我的尝试:DEMO

.content {
width:100%;
height:100%;
background:red;
}

HTML:

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container-fluid"> <a class="navbar-brand" href="#">Brand</a>

    </div>
</nav>

<!-- Content -->
<div class="content">

</div>

<nav class="navbar navbar-fixed-bottom navbar-inverse" role="navigation">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a>

            </li>
            <li><a href="#">Link</a>

            </li>
        </ul>
    </div>
</nav>

这个页面只会有水平滚动。所以我希望 .content 涵盖所有可用空间减去条形空间。并且不与条重叠。

有什么想法吗？

Answer 1

您的导航栏是固定的，因此会重叠。您需要将 navbar-fixed-top 和 navbar-fixed-bottom 更改为 navbar-default 或将其添加到您的 CSS

.navbar, .content{position:relative}