3

Twitter ブートストラップ navbar を asp.net プロジェクトに統合しました。ただし、ブートストラップのテキストを中央に揃えようとしています。これが私のナビゲーションバーのソースコードです

<div id="twitterbootstrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">iPolice</a>
        <div class="nav-collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="#">Home</a></li>
                <li class="divider-vertical"></li>
                <li><a href="Login.aspx">Login</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
</div>
</div>

これは私のブートストラップのイメージです

ここに画像の説明を入力

次に、このtwitterbootstrap cssを内部に追加して、ipolice、home、contact、およびloginを中央に移動しようとしました

#twitterbootstrap {
position:absolute;
text-align:center;
}

うまくいきませんでした。このリンクにアクセスして試してみましたが、まだできませんでした。テキストを中央に揃えるにはどうすればよいですか？

4

1 に答える 1

5

ブランド リンクを表示する場所に応じて、http://jsfiddle.net/panchroma/cW9sA/ または http://jsfiddle.net/panchroma/GWMnF/ の2つの可能性があります。

編集: 狭いビューポートでも、iPolice ブランド リンクが常に中央に配置される 3 番目のバリエーション
http://jsfiddle.net/panchroma/F5x5Z/

2 番目の例では、ブランド リンクのコピーをメイン メニューに追加し、.hidden-desktop と .visible-desktop のユーティリティ クラスを使用して、さまざまなビューポートでの表示方法を微調整したことに注意してください。

重要なCSSは

#twitterbootstrap .navbar .nav,
#twitterbootstrap .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}  

#twitterbootstrap .navbar-inner {
text-align:center;
}

この CSS の一部は、 Andres Ilichからの回答に基づいています。

幸運を！

于 2013-08-22T10:59:35.220 に答える