css - 如何使用 Twitter Bootstrap 响应更改导航栏折叠阈值？

Question

我在 Rails 3.1.2 元素中使用 Twitter Bootstrap 2.0.1，使用 bootstrap-sass 实现。我正在加载 bootstrap.css 和 bootstrap-responsive.css 文件，以及 bootstrap-collapse.js Javascript。

我有一个带有导航栏的流畅布局，类似于 example .这遵循导航栏“响应式变化”说明 here .它工作正常:如果页面窄于 940 像素左右，导航栏会折叠并显示一个“按钮”，我可以单击该按钮展开。

然而，我的导航栏在 550 像素宽时看起来还不错，即它不需要折叠，除非屏幕非常窄。

如果屏幕宽度小于 550 像素，我如何告诉 Bootstrap 仅折叠导航栏？

请注意，此时我不想修改其他响应行为，例如堆叠元素而不是并排显示它们。

Answer 1

Bootstrap > 2.1 && < 3

• 使用 less 版本的 bootstrap
• 更改 variables.less 中的 @navbarCollapseWidth 变量
• 重新编译。

2013 年更新:简单的方法

• 访问http://getbootstrap.com/customize/#less-variables
• 更改表单域中的@navbarCollapseWidth
• 单击“编译并下载”。

(通过评论向 Archonic 致谢)

2014 年更新:Bootstrap 3.1.1 和 3.2 (他们甚至 added it to the documentation )

如果你是 customizing或覆盖/编辑 .less 变量，您正在寻找:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);