twitter-bootstrap 在响应模式下单击按钮时，如何使“导航栏固定底部”向上滑动？（引导程序）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14918773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make "navbar-fixed-bottom" slide up when button is clicked in responsive mode? (bootstrap)
提问by sambehera
Currently Twitter Bootstrap's navbar at the bottom (used as footer) slides "down" when the button is pushed on a phone screen or narrow window.
目前，当在手机屏幕或窄窗口上按下按钮时，Twitter Bootstrap 底部的导航栏（用作页脚）会“向下”滑动。
I want the menu to slide "up" instead of the default "down".. Any ideas on how I can do this with twitter bootstrap?
我希望菜单“向上”滑动而不是默认的“向下”滑动。关于如何使用 twitter bootstrap 执行此操作的任何想法？
the code used in the view layer of the navbar footer is as follows:
导航栏页脚的视图层使用的代码如下：
<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>
回答by isherwood
Scroll to the bottom of the page using a show() event callback:
使用 show() 事件回调滚动到页面底部：
$(function() {
$('.collapse.show-footer').on('show', function () {
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
});
});
<div class="container">
...
<div class="nav-collapse show-footer collapse"> ... </div>
</div>
回答by user2945900
For those using Bootstrap 3 the event "show" has now been renamed to "show.bs.collapse" and so the function would look like this:
对于那些使用 Bootstrap 3 的人，事件“show”现在已重命名为“show.bs.collapse”，因此函数看起来像这样：
$(function() {
$('.collapse.show-footer').on('show.bs.collapse', function () {
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
});
});
回答by Shail
There is one class in bootstrap which solves it all dropup. Use it and it will auto pop up the drop down menu's to drop-up menus
bootstrap 中有一个类可以解决所有问题dropup。使用它，它会自动弹出下拉菜单的下拉菜单
