Question

我正在使用Bootstrap 3.3.5使用.navbar navbar-default类在网页底部显示页脚。在显示大于10的项目列表的页面上，页脚正确显示在页面底部，但在页面少于5个页面上，则页脚显示在页面中间而不是底部。 / p>

HTML代码 ..

 <nav class="navbar navbar-default" style="margin-bottom:0px;padding-botton:0px">
            <div class="container-fluid">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbarBottom">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>                        
                </button>
                <div class="collapse navbar-collapse" id="myNavbarBottom">
                    <ul class="nav navbar-nav navbar-center">
                        <li><a href="https://www.linkA.com"><span class="glyphicon glyphicon-th-large"></span> About</a></li>
                        <li><a href="https://www.linkB.com"><span class="glyphicon glyphicon-pencil"></span> Blog</a></li>
                        <li><a href="https://www.linkC.com"><span class="glyphicon glyphicon-road"></span> How It Works</a></li>
                        <li><a href="https://www.linkD.com"><span class="glyphicon glyphicon-certificate"></span> Credits</a></li>
                        <li><a href="https://www.linkE.com"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
                        <li><a href="https://www.linkF.com" target="_blank"><span class="glyphicon glyphicon-comment"></span><b style="color:blue;"> Survey</b></a></li>
                    </ul>
                </div>
            </div>
        </nav>

将导航栏类更改为“navbar navbar-default navbar-fixed-bottom”后，页脚将固定到页面的bootom，但我无法向下滚动到列表的最后一项。请帮忙..

Answer 1

试试这个......

LANG="en_US.UTF-8"
LC_COLLATE="en_US.UTF-8"
LC_CTYPE="en_US.UTF-8"
LC_MESSAGES="en_US.UTF-8"
LC_MONETARY="en_US.UTF-8"
LC_NUMERIC="en_US.UTF-8"
LC_TIME="en_US.UTF-8"
LC_ALL="en_US.UTF-8"

Answer 2

好吧，如果你想让页脚坚持滚动

然后

.navbar
{
position: fixed;
bottom: 0;
width: 100%;
}

如果你只想要页脚

.navbar
    {
    position: absolute;
    bottom: 0;
    width: 100%;
    }

Bootstrap页脚不粘贴到页面底部

2 个答案: