如何动态取消折叠引导导航栏

Question

我的页面有多个版本，其中navbar中的项目数量差异很大。确切的项目数在服务器上确定。

在某些情况下，导航栏只有 1 或 2 个项目，我想取消折叠它 - 我想查看导航栏上的所有项目（而不是在下拉列表中）。这可以用Javascript动态完成吗？或者，也许可以在创建HTML时在服务器上完成此操作？

我知道我可以使用 http://getbootstrap.com/customize/创建一个静态 CSS 来控制折叠触发器宽度。但是拥有 2 个版本的 Bootstrap CSS（一个用于大屏幕折叠，一个用于小屏幕折叠），然后尝试在两者之间切换似乎不是很干净。

Answer 1

这可以在创建 HTML 时在服务器上完成。在名称栏中获得确切的项目数后，将此值与截止值（navbar中的最大项目数）进行比较。如果项目数更多，则使用导航栏折叠（可能显示更多）。

Answer 2

你可以添加一些 jQuery，它将计算div class="navbar-collapse collapse" 中的列表项数，如果计数返回小于 3 的数字，则使用 .removeClass 删除 "collapse" 类。

这样的事情应该有效：

if($('.navbar-collapse li').size() < 3) { $('.navbar-collapse').removeClass("collapse"); }

更正：不推荐使用 .size;改用 .length

Answer 3

下面是一个Javascript jQuery序列，如何从可折叠的Bootstrap 3 navbar更改为不可折叠的navbar：

// Grab the height of the navbar
var navbarHeight = $('.navbar-header').height();
// Remove the navbar-toggle button
$('.navbar-toggle').remove();
// Move the collapsed section into the navbar-header
$('.collapse').appendTo('.navbar-header');
// Display all the collapsed items inline (assumes all the items are list items)
$('.collapse, .collapse ul, .collapse li').css('display', 'inline-block');
// Remove collapse class
$('.collapse').removeClass('collapse');
// Remove navbar-nav class (optional)
$('.navbar-nav').removeClass('navbar-nav');
// Hard-set the height of the navbar (optional)
$('.navbar-header').height(navbarHeight);

请注意，上述序列仅使用几种类型的导航栏元素进行了测试。导航栏可能需要执行其他步骤。