5

ブートストラップを使用して Web UI を設計しましたが、次のような要件があります。

div id がpart1とpart2であるため、以下の div 構造を定義します。 

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="part1" class="col-md-6">
                    <div>
                        xxxx
                    </div>
                </div>
                <div id="part2" class="col-md-6">
                    <div>
                        yyy
                    </div>
                </div>
            </div>
        </div>
    </div>

ブラウザのウィンドウ サイズを縮小したり、電話のブラウザを縮小したりすると、part1 を自動的に非表示にしたいのですが、どうすればこの効果を得ることができますか?

ところで：css「折りたたみ」をpart1として追加しようとしましたが、ブラウザが大きくても直接非表示になります。

4

3 に答える 3

19

Bootstrap 3 の正しい答え

ユーティリティ クラスを使用して、メディア クエリを介してコンテンツを表示および非表示にします。これらを限定的に使用するようにし、完全に異なるバージョンの smae サイトを作成しないようにしてください。代わりに、各デバイスのプレゼンテーションを補完するために使用してください。

Bootstrap レスポンシブ ユーティリティ クラスのスクリーンショット

ソース: http://getbootstrap.com/css/#responsive-utilities

于 2015-03-25T05:15:59.127 に答える
4

これは動作するコードです、私はテストしました..

    <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ">.col-md-4</div>
    <div class="col-md-4 visible-lg">.col-md-4</div>
    </div>
于 2013-08-26T10:03:27.150 に答える