Question

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

在某些情况下，如果导航栏只有1或2个项目，我想要将其解除折叠 - 我希望在导航栏上看到所有项目（而不是在下拉列表中）。这可以用Javascript动态完成吗？或者也许这可以在创建HTML时在服务器上完成？

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

Answer 1

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

Answer 2

你可以添加一些jQuery来计算div class =“navbar-collapse collapse”中列表项的数量，如果count返回一个小于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);

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

如何动态解除Bootstrap导航栏的崩溃？

3 个答案: