2

Twitter ブートストラップ CSS フレームワークを使用しています。デスクトップ幅のデバイス (1200 以上) 用にのみカスタム ナビゲーションを作成しましたが、各幅のレイアウト (980px、タブレット、電話) 用にさらに作成したいと考えています。を設定visible-desktopしましたが、ブラウザのサイズを 1200px から小さいサイズに変更すると、ナビゲーション バーが台無しになりますが、まだ非表示にはなりません。

<div id="navigation-div" class="span6 offset2">

    <div id="navigation-nophone" class="visible-desktop">
        <ul class="menu clearfix">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Demoes</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

    <div id="navigation-phone" class="visible-phone">
        <ul class="menu">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Demoes</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

</div>

したがって、ウィンドウのサイズを 1200px 未満にリサイズすると、レイアウト幅は 980px になると思いますが、それでもブートストラップはデスクトップだと思います。修正方法がわかりません。

幅 980 ピクセルのレイアウトと幅 1200 ピクセルのレイアウトの新しいパラメーターを定義するのに問題はありませんが、一方から他方に切り替える方法がわかりません (visible-desktop はどちらの場合にも当てはまります)。

PS

電話のナビゲーションスイッチは正常に動作します！

4

3 に答える 3

2

Fluid Bootstap には、980px までのデスクトップ レイアウトと 1200px までのデスクトップ レイアウトがあります。どちらもデスクトップと見なされるため、 visible-desktop のようなレスポンシブ ユーティリティ クラスは、やりたいことに対して十分な柔軟性がありません。

レスポンシブ ブートストラップ css ファイルの @media リクエストを確認してください。おそらく、これが目的の方法です。

これに慣れていない場合は、さまざまなウィンドウ幅の背景色を変更する方法の基本的な例を次に示します: http://jsfiddle.net/panchroma/ZNSVr/

CSS は十分に論理的であり、 

/* regular desktop */
@media (min-width: 980px) {
body{
background-color: green;
}

}

/* wide desktop */
@media (min-width: 1200px) { 
body{
background-color: olive;
}

}

さまざまな @media ブロックの順序がしばしば重要になることに注意してください。

@tahdhaze09 からの提案はベスト プラクティスと見なされており、@media リクエストを使用すると、必要なことを行うのに十分強力であり、1 セットのナビゲーション リンクも使用できる可能性があります。

幸運を！

于 2013-01-15T22:25:02.210 に答える
1

すべてのデバイスで同じナビゲーションを使用し、CSS がナビゲーションの書式設定を処理できるようにする必要があります。

Bootstrap のデフォルトのサンプルを見て、ナビゲーションのコードを調べてください。ビューポートを拡大および縮小すると、例はうまく機能します。

http://twitter.github.com/bootstrap/examples/hero.html

于 2013-01-15T21:38:57.043 に答える
0

この css をカスタム style.css ファイルに入れてみてください

@media (min-width: 768px) and (max-width: 1280px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
    .navbar-nav {
        float: none !important;
        margin: 0px;
    }
    .navbar-nav {
        margin: 7.5px -15px;
    }
    .nav > li {
        position: relative;
        display: block;
    }
    .navbar-nav > li {
        float: none !important;
    }
    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
    }
    .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px;
        overflow-x: visible;
        border-top: 1px solid transparent;
        box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
    }
    .nav {
        padding-left: 0px;
        margin-bottom: 0px;
        list-style: outside none none;
    }
}
于 2016-02-13T07:07:18.510 に答える