获取Bootstrap导航栏折叠以触发JavaScript？

Question

我有一个标准的Twitter Bootstrap 3导航栏，上面带有一些按钮（根据此处： http : //getbootstrap.com/components/#navbar-default ）。 我想更改折叠行为（在折叠行为下，它变成某个屏幕宽度以下的下拉菜单），以便运行我的自定义Javascript函数，而不是创建下拉菜单。 这是因为我正在为较小的屏幕对界面进行更广泛的更改，而不仅仅是CSS允许的更改（例如，我正在DOM中移动UI元素等）。

我应该只关闭导航栏的折叠行为吗？

然后我在考虑页面加载和页面大小调整（使用JQuery的resize（）事件）时，如果宽度小于折叠点，则检查新窗口宽度并触发移动UI（通过我的函数）？

还是有更好的方法呢？

任何想法表示赞赏！ 谢谢

Answer 1

这是可行的，我赞扬您在将平台扩展到独特之处方面超越BS样式所做的努力。

使用少打开BS Navbar.less文件。 在.navbar-collapse {类定义中查找该部分。

这是默认样式（请记住设置为“移动优先”），并且将默认设置为768px（如果未覆盖）为水平样式。 您可以在此处放置样式，它将默认。 您可以在此部分中放置水平样式，并删除所有会翻转到水平位置的@media（最小宽度：@ grid-float-breakpoint）{部分（因为默认情况下会设置）。

下一步是处理断点。 我喜欢enquire.js，因为它允许CSS和JS侦听器之间的断点相同注册。

http://wicky.nillia.ms/enquire.js/

enquire.register("screen and (max-width: 767px)", {
match : function() {
       //Do something
},  
unmatch : function() {
       //undo something
}

}）;

没有enquire.js：

$(window).resize(function() {
  if($(window).width() < 768){
     //do it
    } 
});