在引导程序中创建固定到底部的导航栏，在切换时向上滑动内容 [英] Create a Fixed-to-bottom navbar in bootstrap that slides content upwards when toggled

问题描述

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

I am having two navbars on my website, one in header and other in Footer

页眉部分工作正常，但我想要的是页脚应该类似于导航栏，但是，当我进入移动视图（较小的视口）时，会出现一个切换按钮（默认的自举功能），但是当点击该切换时，它会向下滑动，内容会显示在导航栏下方，尽管如此，有人帮我吗？

Header part working fine, but what i want is that footer should be similar to navbar, but, when i go in mobile view (smaller viewport) there comes a toggle button (default bootstrap feature) but when click on that toggle, it slides downwards, and the content is displayed below the navbar, inspite upwards, so, can anyone help me in this?

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

I don't know, how to include Bootstrap in Fiddle, so directly posting my footer code. it includes, bootstrap files and Fontawesome files in my directly.

获得 Bootply 链接：
http://bootply.com/104001

<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>

推荐答案

我能够通过简单地改变它来实现这一点命令。不要在折叠项目之前放置导航栏标题，而是将其放在之后。这样你就不依赖于定位而且当标题栏和展开按钮移动到底部时不会获得闪光/跳跃。

I was able to get this to work by simply changing the order. Instead of putting your navbar-header before your collapse items, put it after. That way you aren't relying on positioning and don't get a flash/jump while the header bar and expand button move to the bottom.

这是一个演示：< a href =http://www.bootply.com/117444 =noreferrer> http://www.bootply.com/117444

我所做的就是用按钮移动标题div前面的折叠项目div

All I did was move the collapse items div in front of the "header" div with the button

这篇关于在引导程序中创建固定到底部的导航栏，在切换时向上滑动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！