0

デバイスのサイズによっては、特定のデータが表示されないようにすることはできますか？たとえば、テーブルを削除している最中です。テーブルを<div>タグで構成されるグリッドに変更しています。

ユーザーがデスクトップを使用している場合は、次のようなものを表示できるようにしたいと思います。

<div class="row show-grid" id="tblheading" naming="tblheading">
        <div class="span1">Branch</div>
        <div class="span1">Branch Name</div>
        <div class="span1">Building</div>
        <div class="span1">Building Name</div>
        <div class="span1">Room</div>
        <div class="span1">Asset Name</div>
    </div>
    <div class="row show-grid">
        <div class="span1">CAN</div>
        <div class="span1"></div>
        <div class="span1">CAN-Building1</div>
        <div class="span1"></div>
        <div class="span1">CAN-Building1-Room1</div>
        <div class="span1">Value 123</div>
    </div>
    <div class="row show-grid">
        <div class="span1">CAN</div>
        <div class="span1"></div>
        <div class="span1">CAN-Building2</div>
        <div class="span1"></div>
        <div class="span1">CAN-Building2-Room1</div>
        <div class="span1">Value xyz</div>
    </div>

ただし、モバイルデバイスを使用している場合は、ヘッダー付きの最初の「行」を表示したくありません。可能であれば、他のフィールドの一部を削除して、モバイルデバイスのアセット名のみを表示したいと思います。レスポンシブデザインは初めてなので、修正の質問があればお詫びします。私を正しい方向に向けていただければ幸いです。

ありがとう。

4

2 に答える 2

0

これは、非表示にする行/セルにクラスを追加し、そのクラスを表示するように設定する場合です。モバイルデバイスを対象とするメディアクエリにはありません。ツイッターのブートストラップにはそのようなクラスがすでに組み込まれていると思いますが、正確な名前を思い出せません。

于 2013-03-25T14:27:27.017 に答える
0

ここでBootstrapのドキュメントを見ると、このための組み込みクラスについて説明しています。

ここに画像の説明を入力してください

これらのクラスを使用して、画面サイズに基づいて列または行を表示および非表示にすることができます。違いが十分に大きい場合は、複数のテーブルを作成して、サイズごとに適切なテーブルを表示できます。

于 2013-03-25T14:27:43.047 に答える