我在我的网站上有两个导航栏,一个在标题中,另一个在页脚中
标题部分工作正常,但我想要的是页脚应该类似于导航栏,但是,当我进入移动视图(较小的视口)时,会出现一个切换按钮(默认引导程序功能)但是当单击该切换时,它会向下滑动,内容显示在导航栏下方,尽管向上,所以,任何人都可以帮助我吗?
我不知道,如何在Fiddle中包含Bootstrap,所以直接发布我的页脚代码.它直接包括,bootstrap文件和Fontawesome文件.
获得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 …Run Code Online (Sandbox Code Playgroud) javascript jquery navbar twitter-bootstrap twitter-bootstrap-3
目前,当按钮被按在电话屏幕或窄窗口上时,Twitter Bootstrap的底部导航栏(用作页脚)向下滑动.
我希望菜单向上滑动而不是默认的"向下"..有关如何使用twitter bootstrap执行此操作的任何想法?
导航栏页面视图层中使用的代码如下:
<footer id="footer" class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar dropup" data-toggle="collapse" data-target=".show-footer">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse show-footer">
<nav>
<ul class="nav pull-right">
<%= g_about_link(yield(:title)) %>
<%= g_contact_link(yield(:title)) %>
<%= g_faq_link(yield(:title)) %>
<%= g_careers_link(yield(:title)) %>
<%= g_privacy_link(yield(:title)) %>
<%= g_quotes_link(yield(:title)) %>
<%= g_terms_link(yield(:title)) %>
<li><a href="http://news.railstutorial.org/" target="_blank">News</a></li>
</ul>
</nav>
</div><!--/.nav-collapse -->
</div>
</div>
</footer>
Run Code Online (Sandbox Code Playgroud)