2

私は自分のサイトでレスポンシブな流動グリッド システムを使用しています。ほとんどの場合、レスポンシブな Bootstrap の動作が必要です。小さな画面では、グリッドの列が流動的になり、垂直に積み上げられます。

ただし、グリッドのネストを使用すると、ネストされた行内でこれが常に望ましい動作になるとは限りません。画面がどれほど小さいかに関係なく、垂直方向に積み重ねることが想定されていない行がいくつかあります。これは、すべてのレスポンシブ CSS コードを完全に無効にした場合のグリッド全体の動作とまったく同じですが、外側の行にレスポンシブ動作が必要な場合、明らかにこれは代替手段ではありません。

関連するマークアップは次のとおりです。

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">This column should be stacked on small devices.</div>
        <div class="span6">
            <div class="row-fluid">
                <div class="span6">Nested row. This column should NOT be stacked on small devices.</div>
                <div class="span6">Nested row. This column should NOT be stacked on small devices.</div>
            </div>
        </div>
    </div>
</div>

明確にするために、このjsfiddeを参照してください。

この問題をどのように解決するのが最善でしょうか? ネイティブのブートストラップ関数でそれを行う方法はありますか?

4

3 に答える 3

3 
[class*="span"] .span6 { display: inline-block; width: 48.61878453038674%}

例:
http://jsfiddle.net/NfTQ7/1/

于 2013-02-12T13:18:29.773 に答える
0

このような問題を解決するために私が行ったことは次のとおりです。

<div class="row-fluid">
    <div id="remove-mobile" class="span6">Nested row. This column should NOT be stacked on small devices.</div>
    <div id="remove-mobile" class="span6">Nested row. This column should NOT be stacked on small devices.</div>
</div>


@media only screen and (max-width: 480px) {

    #remove-mobile {

        display:none;

    }

}

そうすれば、小さなデバイスでの混乱をすべて取り除くことができ、逆の操作を行うだけで、モバイルサイズを特に対象としたコードを追加できます。

<div class="row-fluid">
    <div id="show-mobile" class="span6">Your Beautiful Code For Mobile Only</div>
</div>


@media only screen and (min-width: 481px) {


    #show-mobile {

        display:none;

    }


}


@media only screen and (max-width: 480px) {

    #show-mobile {

        display:block;

    }

    #remove-mobile {

        display:none;

    }

}
于 2013-02-12T12:57:28.657 に答える