Geek asks and answers

How to dynamically expand the bootstrap navigation bar?

I have several versions of my page, where the number of elements navbarvaries greatly. The exact number of items is determined on the server.

In some cases, when the navbar has only 1 or 2 elements, I want to expand it - I want to see all the elements in the navigation panel (and not in the drop-down list). Can this be done dynamically using Javascript? Or maybe this can be done on the server when creating the HTML?

I know that I can create static CSS from http://getbootstrap.com/customize/ to control the width of the crash trigger. But having two versions of Bootstrap CSS (one for crashing the big screen and one for crashing on the small screen) and then trying to switch between them doesn't seem very clean.

+3
source share
3 answers

Here is the jQuery Javascript sequence of how to go from resettable Bootstrap 3 navbarto non-folding 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);

Please note that the above sequence has been tested with only a few types of navigation elements. This may require additional steps for your navigator.

0

HTML. , ( navbar). , navbar-collapse ( ).

0

You can add some jQuery that will count the number of list items in the div class = "crash on the control panel", and if the counter returns a number less than 3, use .removeClass to remove the "collapse" class.

Something like this should work:

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

Correction: .size is out of date; use .length instead

0
source

More articles:


All Articles