37

ページの中央にナビゲーションを配置し、さまざまな解像度で中央に配置できるようにしたいと考えています。オフセットを使用してそれを押し上げたり、マージンを左に移動したりしたくありません。これは、さまざまなブラウザーの幅でそれを台無しにするだけだからです。これは私がいじっている典型的なバーですが、ul は常に左揃えになります。 

     <div class="navbar 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>
                <div class="nav-collapse">
                     <ul class="nav">
                          <li class="active"><a href="#">Menu</a></li>
                          <li><a href="#">On Tap</a></li>
                          <li><a href="#">Shows</a></li>
                          <li><a href="#">Surfwear</a></li>
                          <li><a href="#" >Contact</a></li>
                     </ul>
                </div><!--/.nav-collapse -->
           </div><!-- container -->
      </div><!-- navbar-inner -->
 </div><!--  navbar navbar-fixed-top -->
4

8 に答える 8

57

Modify twitter bootstrap navbarの重複の可能性があります。これがあなたが探しているものだと思います（コピー）：

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

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

リンクされた回答に記載されているように、これらのプロパティを使用して新しいクラスを作成し、nav div に追加する必要があります。

于 2012-06-07T21:03:44.557 に答える
7

Bootstrap 3 でこれが必要な人にとっては、はるかに簡単になりました。

新しいnav-justifiedクラスを使用して、すべてのナビゲーション バー リンクを中央に配置できます。

http://www.bootply.com/g3g125MLGr

<div class="navbar">
  <ul class="nav nav-justified" id="myNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

または、わずかな CSS を使用して、ブランド/ロゴのみを中央に配置し、左右のリンクを別々に保つことができます..

http://www.bootply.com/3iSOTAyumP

于 2014-05-05T13:41:18.753 に答える
5

.navbar幅を固定して、左右のマージンを に設定できautoます。

デモ

.navbar{
    width: 80%;
    margin: 0 auto;
}​
于 2012-06-07T20:53:11.583 に答える
0

http://www.bootply.com/3iSOTAyumPこの例では、.navbar-brand が前面にあるため、折りたたむボタンをクリックできませんでした。

http://www.bootply.com/RfnEgu45qR折りたたみボタンが実際にクリック可能な更新バージョンがあります。

于 2014-11-02T14:00:16.297 に答える
0

私はこれを好む：

<nav class="navbar">
  <div class="hidden-xs hidden-sm" style="position: absolute;left: 50%;margin-left:-56px;width:112px" id="centered-div">
    <!-- this element is on the center of the nav, visible only on -md and -lg -->
    <a></a>
  </div>

  <div class="container-fluid">
    <!-- ...things with your navbar... -->
      <div class="visible-xs visible-sm">
        <!-- this element will be hidden on -md and -lg -->
      </div>
    <!-- ...things with your navbar... -->
  </div>
</nav>

要素は完全に中央に配置され、一部の画面サイズでは非表示になります (たとえば、-xs と -sm には場所がありませんでした)。Twitterの実際のナビゲーションバーからアイデアを得ました

于 2015-06-19T17:14:20.993 に答える
0 
.navbar-right { 
    margin-left:auto;
    margin-right:auto; 
    max-width :40%;   
    float:none !important;
}

このコードをコピーしてmax-width、好きなように変更してください

于 2015-01-21T19:52:53.320 に答える