0

ブラウザウィンドウの最大幅が767pxの場合、Twitterブートストラップのレスポンシブ機能を使用してメニュースタイルを変更しています。

次に例を示します。http：//jsfiddle.net/G2mEv/2/

フルウィンドウ： http： //jsfiddle.net/G2mEv/2/embedded/result/

問題は、ウィンドウの最大幅が979pxの場合、異なるスタイルが適用されることです。しかし、私はこれを767pxで実行したいと思います。タブレット用に別のメニューを用意したくないので、電話用だけです。

Cssにはtwitterブートストラップが付属しているので、HTMLを提供するだけです。

    <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-target=".nav-collapse"
                                          data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#" tabindex="-1">
                    Some logo
                </a>
                <nav class="nav-collapse collapse" role="navigation">
                    <ul class="nav pull-right">
                        <li class="active"><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </nav>
            </div>
        </div>

これを管理する方法はありますか？私の例を自由にフォークしてください。

4

2 に答える 2

3

好みに応じて、メディア クエリの最小値と最大値を変更する必要があります。

たとえば、次のように変更します。

@media (max-width: 979px) {
...
@media (min-width: 768px) {

これに：

@media (max-width: 767px) {
...
@media (min-width: ???px) {

ここでは、Bootstrap ファイルを変更したくない場合に、別のスタイルシートでメディア クエリをオーバーライドする方法について説明します。

于 2013-03-16T18:37:16.563 に答える
1

次のすべてを削除すると思います：

@media (min-width: 768px) and (max-width: 979px) { 
    /* delete all code */
}

それはうまくいくはずです。画面幅が 768 ～ 979 ピクセルのカスタム レスポンシブ CSS を除外する、カスタマイズされたブートストラップ ダウンロードをここで作成できます。

http://twitter.github.com/bootstrap/customize.html

チェックを外しTablets to desktops (767-979px)てダウンロードするだけです。

于 2013-03-16T19:40:53.120 に答える