How to stretch elements of a Bootstrap navigation bar to make use of the entire width?

StackOverflow https://stackoverflow.com/questions/22247911

Pregunta

Consider the following Bootstrap navigation bar:

My custom Bootstrap navigation bar

Some facts about this navigation bar:

  • The bar itself is exactly 620px broad (page's width)
  • The bar is responsive (collapse breakpoint at 640px)
  • The bar's elements stick together (no space between)
  • The bar has multi-language support (the elements' widths change)

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>
¿Fue útil?

Solución

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/

Otros consejos

Based on @Moob's answer, I created a gist which should do that nicely:

https://gist.github.com/lukaszbachman/48774b74b6c4e9d0f4cb#file-navigation-stretch-css

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top