5

わかりましたので、メディアクエリを使用して画面のサイズを変更するときにコンテンツを削除する最善の方法を見つけようとしています。ただし、私は Twitter Bootstrap グリッド システムを使用しており、少しトリッキーになっているため、いくつかの指針をいただければ幸いです。

次の基本的なグリッドがあるとしましょう:-

<div class="container-fluid">
    <div class="row-fluid">
        <div id="left-content" class="span6">
            Left Content
        </div>
        <div id="right-content" class="span6">
            Right Content
        </div>
    </div>
</div>

私はcssメディアクエリを使用して、画面の幅が特定のサイズに縮小されたときに、次の#right-contentように単純なものを非表示にしたい:-

@media screen and (max-width: 800px) {
    #right-content {
        display:none;
    }
}

ただし、コンテンツが画面と同じ幅になるように、クラスを to#left-contentからspan6toに更新する必要があります。span12私は明らかにJavaScriptでこれを行うことができますが、これは純粋なcssで行うことができますか?

4

2 に答える 2

9

Bootstrap 3.0 には、使用できる追加のグリッド クラスが.col-sm-12あり.col-md-6ます。http://getbootstrap.com/css/#grid-optionsを参照してください

右側の列は、単にクラスを使用できます: .hidden-xs .hidden-sm( http://getbootstrap.com/css/#responsive-utilities )

<div class="row">
    <div id="left-content" class="col-sm-12 col-md-6">
        Left Content
    </div>
    <div id="right-content" class="hidden-xs hidden-sm col-md-6">
        Right Content
    </div>
</div>
于 2013-09-10T20:01:39.653 に答える