0

約 1 年前、@Andres Ilich は、Bootstrap のナビゲーション バーを中央に配置するための美しくエレガントな回答を提供しました。 投稿された回答の抜粋は次のとおりです。

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

これはドロップダウンメニューにも影響を与えたので、彼はこれを追加しました:

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

ドロップダウンメニューが正常に動作するように。

今、私は同様の問題に直面しています。ナビゲーションバーは美しく中央に配置されています。ドロップダウンはうまく機能します。ただし、タブレットやモバイルのビューポートに入ると、モバイル メニューも中央に表示されます。順序付けされていないリスト項目にはそれぞれ独自の行が必要なため、単にテキストを左に揃えるだけでは問題は解決しません。

これを元に戻すメディアクエリ内にクラスを簡単に追加できる方法を見つけようとしましたが、解決策を見つけることができませんでした.

私が話していることを確認するには、この jsFiddle を参照してください: http://jsfiddle.net/persianturtle/rAYyk/2/

私の質問: メディア クエリ内で上記のコードを元に戻す簡単な方法 (50 行未満のコード) はありますか?

純粋な CSS ではこれができない場合、jQuery ソリューションがどのように機能するかを順を追って説明できますか? 私は h5bp を持っているので、すでに jQuery 1.9.0 をリンクしています。

4

1 に答える 1

1

タブレットとモバイルのビューポートにのみ影響する CSS の変更を行いたい場合は、bootstrap-responsive.css ファイルに必要な CSS オーバーライドを追加できます。

これは、「レスポンシブ デザイン」を実行し、タブレットとモバイル ビューポートのスタイルを設定する @media クエリが配置されている場所です。

@media (max-width: 979px) { 
    .center .navbar-inner {
        text-align:left !important;
    }
    .center.navbar .nav > li{
        display:block !important;
    }
}
于 2013-02-13T19:17:46.390 に答える