2

私はこれを中心にしようとしていました:http: //jsfiddle.net/MikeStardust/hwhS5/ナビゲーションバーですが、運がありません...

中央とは、ナビゲーションの中央にある 1 行に配置された要素を意味します...いくつかのソリューションを検索しましたが、どれも機能せず、行ごとに 1 つの要素を持つ中央に配置されたナビゲーション バーになりました。

バー html: (jsfiddle の css & html)

 <div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 
              data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="http://chaoticunited.com/forums">Forums</a></li>
        <li><a href="servers.html">Servers</a></li>
        <li><a href="help.html">Help Center</a></li>
        <li><a href="#" data-toggle="modal" data-target="#vote">Vote</a></li>
        <li><a href="#">Donate</a></li>
      </ul>
    </div><!-- /.nav-collapse -->
  </div><!-- /.navbar

私はこれを持っています：i.imgur.com/JVh05N1.png

そして、これが欲しい:(フォトショップからの結果) http://i.imgur.com/B3UcOU9.png

4

2 に答える 2

1

の表示値.navbar-navを inline-block に変更してtext-alignから、その親に適用して配置を制御してみてください。

モバイル ビューの配置を変更する必要がある場合はtext-align、そのブレークポイントで再適用できます。

.navbar-nav {
    display: inline-block;
}

.navbar-default {
    text-align: center;
}

例: http://jsfiddle.net/hwhS5/2/

于 2013-11-14T18:47:03.747 に答える