Question

我的网站上有两个导航栏，一个在页眉中，另一个在页脚中

标题部分工作正常，但我想要的是页脚应该类似于导航栏，但是，当我进入移动视图（较小的视口）时，会出现一个切换按钮（默认引导程序功能），但是当单击该切换时，它向下滑动，内容显示在导航栏下方，尽管向上，所以，任何人都可以帮助我吗？

我不知道，如何在Fiddle中包含Bootstrap，所以直接发布我的页脚代码。它直接包括，bootstrap文件和Fontawesome文件。

<footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="footer-bar-btns visible-xs">
                    <li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text"></i></a></li>
                    <li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text"></i></a></li>
                    <li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text"></i></a></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse" id="footer-body">
                <ul class="nav navbar-nav">
                    <li><a href="#">Browse Our Library</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Our Partners</a></li>
                    <li><a href="#">User Review</a></li>
                    <li><a href="#">Terms &amp; Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

Answer 1

我只需更改顺序就能让这个工作正常。不要在折叠项目之前放置导航栏标题，而是将其放在之后。这样，当标题栏和展开按钮移动到底部时，您不依赖于定位并且不会获得闪光/跳跃。

以下是演示：http://www.bootply.com/117444

我所做的只是使用按钮

移动“header”div前面的折叠项目div

Answer 2

如果我理解您的问题，您希望切换菜单显示在上方而不是切换按钮下方。要做到这一点，你需要绝对定位collaspe菜单..

footer .navbar-collapse.in {
    bottom: 70px;
    position: absolute;
    background-color:#333;
    width:100%;
}

Bootply演示：http://bootply.com/103653

Answer 3

修复Skelly解决方案。

再添加一个CSS：

@media screen and (max-width: 768px) {
  footer .navbar-collapse {
    position: absolute;
    bottom: 70px;
    width: 100%;
    background-color: #303030;
  }
}

http://www.bootply.com/4b6cSUMTzg

在引导程序中创建固定到底部的导航栏，在切换时向上滑动内容

3 个答案: