web-dev-qa-db-ja.com

Twitter-Bootstrap 3ナビゲーションバーリンクを中央に配置するにはどうすればよいですか？

設定したjsFiddleでボタンを中央に配置して、ボタンが等間隔になり、navbar全体および中央に配置されるようにするにはどうすればよいですか？

http://jsfiddle.net/3GQyq/3/

私はさまざまな方法を試しました

display:inline-block;margin:0 auto; text-align:center;

しかし、私はそれを機能させることができません。

私が学びたいようにCSSを修正するだけでなく、少し説明してもらえれば、ここに戻る必要はありません。

編集：

http://img1.123freevectors.com/wp-content/uploads/icon_big/038_icon_beautiful-navigation-bar-free-vector.jpg ちょうど彼らがここで中心に置かれているように^.

csstwitter-bootstrapcenteringnavbar
11
Ashley Brown

Bootstrap 3にはnav-justifiednavで使用できるクラス。追加のCSSは必要ありません：

<div class="container">
  <h3 class="text-muted">Project name</h3>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

デモ： http://bootply.com/72519

コメントに基づいて、navbar-navクラス、フレックスボックスを使用...

.navbar-center {
    width:100%;
    display: flex;
}
.navbar-center>li {
    flex:1 1 auto;
}

<div class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav navbar-center text-center">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Options</a></li>
        </ul>
    </div>
</div>

https://www.codeply.com/go/6ZE3obnpuP

また見なさい
Bootstrap NavBar with left、center or rightaligned items
ブートストラップの中央ナビゲーションバー

14
Zim

スタイルを追加

.nav{
    text-align: center;
}

これは、liのテキストを中央揃えにします。

フィドルをチェック

これらのスタイルで十分です。間違った要素にスタイルを適用しようとしました。

// This is being applied by the bootstrap
// Set it to 25px instead of the default 15px
.navbar{
    padding : 0 25px;
}

// Gave a width of 110px for each li
// as the container is following a fixed width format
li{
    width:110px;
}
3
Sushanth --