10

だから、ナビゲーションバーのリスト項目を中央に配置しようとしています。このタスクにはユーティリティ関数がないため、順序付けられていないリストを行内の列に配置する次のコードを考案しました。しかし、古い「text-align:center」で中央揃えを試みた後でも、リストは左に揃えられます。 

<div class="navbar navbar-fixed-top ">
    <!--<a class="navbar-brand" href="#">Title</a> -->
    <div class= "row">
        <div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
4

3 に答える 3

23

私が取った手順：

  • float: leftリストおよびリスト要素から削除
  • display: inlineリスト要素の代わりに使用
  • display: inline-blockブロックの寸法を保持するようにリンクを設定する
  • ナビゲーションバーに追加text-align: centerするだけで、すべてを中央に配置できます
  • メディア クエリをラップして、モバイルの垂直リストが影響を受けないようにする

.navbar-centeredスタイルを追加した結果の CSS :

@media (min-width: 768px) {
    .navbar-centered .navbar-nav {
        float: none;
        text-align: center;
    }
    .navbar-centered .navbar-nav > li {
        float: none;
    }
    .navbar-centered .nav > li {
        display: inline;
    }
    .navbar-centered .nav > li > a {
        display: inline-block;
    }
}

.navbar-centeredナビゲーションバーにスタイルを適用して使用:

<div class="navbar navbar-default navbar-centered" role="navigation">
    ...
</div>
于 2013-08-30T09:51:22.937 に答える
3

私は自分でこれを理解することができました。それが最善の解決策であったかどうかはわかりません：

        <div class="navbar navbar-fixed-top">                
                    <div style="border:1px solid black" class="container">
            <div class="inner-nav">
                <!--<a href="#" class="navbar-brand">Title</a> -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/" >Home</a></li>
                    <li><a href="#" >About</a></li>
                    <li><a href="#" >Projects</a></li>
                    <li><a href="#" >contact</a></li>
                </ul>
            </div>
                    </div>                
            </div>

次に、次のスタイルを bootstrap.css に追加しました。

/* ADDED for centering navbar items */
.navbar .inner-nav ul {
position:relative;left:50%;float:left;margin-right:0;margin-left:0;
}

/* ADDED for centering navbar items */
.navbar .inner-nav li {
position:relative;right:50%;float:left;margin:0;list-style:none
}
于 2013-07-28T18:31:31.627 に答える