☰

Twitter Bootstrap のナビゲーションバーを変更する 質問する

tag-icon • tag-icon css ruby-on-rails twitter-bootstrap
Twitter Bootstrap のナビゲーションバーを変更する 質問する

Twitter のブートストラップ ナビゲーション バーを変更しようとしていますが、現時点ではすべてのリンクが左揃えになっていますが、中央に揃えたいのです。

別の投稿でこれを使うと読んだ

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

しかし、これは私には効果がありません

これを実現するには CSS で何を変更する必要がありますか。変更した CSS をブートストラップに入れてオーバーライドする必要があることは理解しています。

ご協力いただければ幸いです

これは私のマークアップです

レイアウト/アプリケーション

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <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">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

私もこれを試しました

.nav > li {
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */
}
.nav {
  text-align: center;
}

ベストアンサー1

次のように、メニュー項目を ではdisplay:inline-blockなくに設定することで、ナビゲーション メニューを中央に配置できます。float:left

.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;
}

中央に配置したいナビゲーション バー メニューをターゲットとする独自のクラスを作成することをお勧めします。この方法では、ブートストラップのデフォルト値を気にせず、ページ内にある他のナビゲーション セクションを混乱させることもありません。次のように実行できます。

ナビゲーションバーコンテナの.centerクラスに注目してください

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

そして、.center次のようにクラスをターゲットにすることができます。

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

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

デモ：http://jsfiddle.net/C7LWm/show/

編集: サブメニュー項目を左に再配置するのを忘れていました。修正方法は次のとおりです。

CS

.center .dropdown-menu {
    text-align: left;
}

デモ：http://jsfiddle.net/C7LWm/1/show/

おすすめ記事