web-dev-qa-db-ja.com

Bootstrapナビゲーションバーの要素をストレッチして、幅全体を利用する方法は？

次のBootstrapナビゲーションバーを検討してください。

My custom Bootstrap navigation bar

このナビゲーションバーに関するいくつかの事実：

  • バー自体の幅は正確に620pxです（ページの幅）
  • バーは反応します（640pxでブレークポイントを折りたたみます）
  • バーの要素がくっついている（間にスペースがない）
  • バーには多言語サポートがあります（要素の幅が変わります）

バーの要素をストレッチして幅全体を利用するにはどうすればよいですか？右側の残りの空きスペースは、バーの要素の間に分散する必要があります。各要素には異なる幅があり、この幅は言語ごとに異なる可能性があるため、パーセンテージでは処理できません。唯一の解決策はJavaScriptだと思います。しかし、私はどんな例も見つけることができません...

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>
javascripttwitter-bootstrapnavbar
20
Karsten

CSSテーブルの表示レイアウトを使用して、ナビゲーションアイテムを配布できます。その ブラウザ間で十分にサポートされています で、実装は簡単です。

.navbar-nav {
    display:table;
    width:100%;
    margin: 0;
}
.navbar-nav > li {
    float:none;
    display:table-cell;
    text-align:center;
}

これにより、親#headerの幅が100％になり、#pageの幅によって制限されるため、ドキュメント全体の幅の100％に広げる必要がある場合は、 #pageから移動するか、#pageを広くします。

http://jsfiddle.net/zBM6D/5/

22
Moob

@Moobの答えに基づいて、私はそれをうまく行うはずのGistを作成しました：

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

6
ŁukaszBachman