22

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

4 に答える 4

50

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

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

navbar コンテナの .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/

編集：サブメニュー項目を左に再配置するのを忘れていました。これが修正です：

CSS

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

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

于 2012-05-12T23:53:26.933 に答える
3

これが古い投稿であることは知っていますが、グーグルでこの投稿に何度か気づきました。現在受け入れられている方法は間違っていないため、実際にTwitterブートストラップでナビゲーションバーを中央に配置するための記録をまっすぐに設定したいのですが、Twitterブートストラップがこれをサポートしているため必要ありません。

実際には、手動で変更してからこれを行うより良い方法があります。これにより、既に Twitter のブートストラップにあるものを使用してコードを削減できます。

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">RIZEN</a>
            <ul class="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Forums</a></li>
            </ul>
        </div>
    </div>
</div>

内訳
最初の行は非常にシンプルです。ナビゲーション バーを作成し、ビューポートの上部に固定位置に設定し、カラー テーマを反転して白を黒に交換します。

次に、navbar-inner を割り当てます。これは多かれ少なかれ、可能な場合は最小の高さを設定します。これは、上記の行ではなく、実際のカラー スタイリングが由来する場所です。

navbar の流動的なレイアウトを削除し、コンテナーのみを使用するため、ここに重要な行があります。これにより、内側のコンテンツが画面の中央に配置される固定マージンが設定されます。これは、自動マージンを設定し、幅を設定することによって行われます。

このメソッドは、余分なコードを追加せず、Twitter ブートストラップでスキャフォールディングを適切に使用し、余分なコードが肥大化しないようにすることで、実際にヘッダー要求で kb を節約するので、必要なことを行います。私は自分のプロジェクトでこの方法を使用しており、現在のプロジェクトでも引き続き使用しています。TBS (twitter ブートストラップ) を変更する際の危険は、コードの一貫性が失われることです。将来、何かを変更したい場合は、何を変更したかを心に留めておく必要があります。そうしないと、意図したとおりに機能しない可能性があります。

お役に立てれば。また、実際の例が必要な場合は、twitter ブートストラップのホームページを参照してください。

于 2013-02-24T00:31:02.607 に答える
1

ああ、また、両側 (「プロジェクト名」の前と「ドロップダウン」の後) のスペースを対称にしたい場合は、次を追加します。

.navbar .nav, .navbar .nav > ul
{
    float: right
}

また、(Bootstrap v2.0.4 の時点で) 以下を使用してもナビゲーション バーが中央に表示されないようです。

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

に変更する必要があります

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

(Andres llich によって提供されたサンプルから抜粋; 彼は変更を見逃しただけです)

今、それは私のために働く...

于 2012-07-24T14:59:47.410 に答える
0

上記のセンタリング css は、折りたたまれていないナビゲーション バーでのみうまく機能します。

ただし、ナビゲーション バーが折りたたまれている場合は理想的ではありません。デフォルトでは、折りたたまれた各ナビゲーション バー項目は、ドロップ ダウン メニューのように独自の行にあります。しかし、上記の css は折りたたまれたすべての項目を同じ行に押し込もうとしますが、これは理想的とは言えません。

センタリング css をメディア クエリでラップするこの小さな修正を使用したため、折りたたまれていないナビゲーション バーでのみトリガーされます。

@media (min-width: 768px) {
    .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;
    }
}

(ブートストラップ 3.1.1 でテスト済み)

于 2015-01-27T17:15:27.770 に答える