![](/img/trans.png)
[英]Bootstrap Navbar-fixed-bottom div overlaps JS rendered content
[英]How to make “navbar-fixed-bottom” slide up when button is clicked in responsive mode? (bootstrap)
目前,当按钮被按在电话屏幕或窄窗口上时,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>
使用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>
对于那些使用Bootstrap 3的人来说,事件“show”现在已经被重命名为“show.bs.collapse”,所以函数看起来像这样:
$(function() {
$('.collapse.show-footer').on('show.bs.collapse', function () {
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
});
});
bootstrap中有一个类可以解决所有dropup
。 使用它,它会自动弹出下拉菜单到下拉菜单
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.