Como esticar elementos de uma barra de navegação do Bootstrap para usar toda a largura?

Question

Mar 07, 2014, 11:45 AM

Como esticar elementos de uma barra de navegação do Bootstrap para usar toda a largura?

Considere a seguinte barra de navegação do Bootstrap:

Alguns fatos sobre esta barra de navegação:

A barra em si tem exatamente 620 px de largura (largura da página)A barra é responsiva (colapso do ponto de interrupção em 640px)Os elementos da barra ficam juntos (sem espaço entre eles)A barra possui suporte multilíngue (as larguras dos elementos mudam)

Como esticar os elementos da barra para fazer uso de toda a largura? O espaço vazio restante à direita deve ser distribuído entre os elementos da barra. Como cada elemento tem uma largura diferente e essa largura pode mudar de idioma para idioma, não posso trabalhar com porcentagens. Eu acho que a única solução será JavaScript. Mas não consigo encontrar nenhum exemplo ...

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>