Menu
Consider the following Bootstrap navigation bar:
Some facts about this navigation bar:
How can I stretch the bar's elements to make use of the entire width? The remaining empty space at the right should be distributed among the bar's elements. Since each element has a different width and this width may change from language to language, I cannot work with percentages. I guess that the only solution will be JavaScript. But I cannot find any example...
Js Fiddle Demo: http://jsfiddle.net/zBM6D/3/
<body> <div id="page"> <header id="header"> <nav class="navbar navbar-default roboto normal" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-elements"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navigation-elements"> <ul class="nav navbar-nav"> <li class="active"><a href="#">START</a> </li> <li><a href="#">THESE</a> </li> <li><a href="#">ARE</a> </li> <li><a href="#">SOME</a> </li> <li><a href="#">ELEMENTS</a> </li> <li><a href="#">WITH</a> </li> <li><a href="#">DIFFERENT</a> </li> <li><a href="#">WIDTHS</a> </li> </ul> </div> </div> </nav> <div class="clear"></div> </header> </div> </body> 
885
The simplest way to get the effect you are looking for (for any number of buttons) is to use a table with a 100% width. A more complicated way is to give each button an equal percentage width such that with the number of buttons it adds up to 100%. You have 5 buttons, so you can put width:20%; on #nav ul li .
So if you want full-width you either have to wrap your navbar in a row (inside your container) or you just don't use container 's at all. Show activity on this post.
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).
You could use CSS Table display layout to distribute your nav items. Its well supported across browsers and simple to implement:
.navbar-nav { display:table; width:100%; margin: 0; } .navbar-nav > li { float:none; display:table-cell; text-align:center; } This makes it 100% the width of its parent #header, which in turn is restricted by the width of #page, so if you need it to span 100% of the whole document width you'll need to move it out of #page or make #page wider.
http://jsfiddle.net/zBM6D/5/
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
