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}

如何通过Bootstrap将页面分为3个部分

1 个答案: