1

マークアップがあるとしましょう：

<div class="container-fluid">

            <!-- 1 Col -->
            <div class="row-fluid">
                <div class="span12">
                    <h2>1</h2>
                </div>
            </div>

            <!-- 2 Col -->
            <div class="row-fluid">
                <div class="span6">
                    <h2>2</h2>
                </div>
                <div class="span6">
                    <h2>2</h2>
                </div>
            </div>
</div>

そして、2番目の行の2つの列をspan12にし、ウィンドウの解像度が400pxのときに全画面表示にしたいとします。

使用：

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


}

「すべてのspan6はこの解像度でspan12である必要があります」と言うブートストラップに何らかの方法がありますか？

私は次のようなハッキーな方法を使用してそれを達成することができます：

@media only screen 
and (max-width : 400px) {
    .span6{
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0px !important;
        padding: 0 !important;
    }
}

しかし、それは明らかに嫌です。

また、JSを使用してクラスを追加できることも知っていますが、Javascriptを使用したくありません。このサイトはクリーンである必要があります。

編集

Jamesは以下の優れた解決策を考え出しましたが、span3をspan6（4列から2列）に分割する場合も同様に、側溝がさまざまな要素の位置をずらすように強制します。頭の中でやりたいことは、Javascriptなしでは不可能または非常に難しいと思い始めています。

ありがとう。

4

1 に答える 1

1

行に追加のクラスを使用しない理由など

<div class="container-fluid">

        <!-- 1 Col -->
        <div class="row-fluid">
            <div class="span12">
                <h2>1</h2>
            </div>
        </div>

        <!-- 2 Col -->
        <div class="row-fluid row-resize">
            <div class="span6">
                <h2>2</h2>
            </div>
            <div class="span6">
                <h2>2</h2>
            </div>
        </div>
</div>

次に、セレクターで特異性を使用できます

@media only screen 
and (max-width : 400px) {
    .row-resize >.span6{
        width: 100%;
        float: none ;
        margin: 0 0 20px 0px;
        padding: 0;
    }
}
于 2012-11-28T16:31:26.293 に答える