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

问题描述

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

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

我不知道，如何在 Fiddle 中包含 Bootstrap，所以直接发布我的页脚代码.它直接包含在 my 中的引导程序文件和 Fontawesome 文件.

有 Bootply 链接:http://bootply.com/104001

<div class="navbar navbar-inverse navbar-fixed-bottom"><div class="容器"><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><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="订阅"><i class="fa fa-2x fa-rss-square orange-text"></i></a></li>

<div class="navbar-collapse collapse" id="footer-body"><ul class="nav navbar-nav"><li><a href="#">浏览我们的图书馆</a></li><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li><li><a href="#">我们的合作伙伴</a></li><li><a href="#">用户评论</a></li><li><a href="#">条款&amp;条件</a></li><li><a href="#">隐私政策</a></li>

</页脚>

解决方案

我能够通过简单地更改顺序来使其工作.不要将导航栏标题放在折叠项目之前，而是放在之后.这样您就不会依赖于定位，也不会在标题栏和展开按钮移动到底部时出现闪烁/跳跃.

这是一个演示:http://www.bootply.com/117444

我所做的只是使用按钮将折叠项 div 移动到标题"div 前面

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?

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.

Got Bootply link: 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.

Here's a demo: http://www.bootply.com/117444

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

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