0

2 つの列を持つ Twitter Bootstrap を使用したレスポンシブ レイアウトがあります。

  • div #charts はいくつかのチャートを示します
  • div #grid は、テキストを含むテーブルを示しています

問題: 小さいデバイス (Ipad、Iphone など) では、表が非常に小さくなり、非常に長くなります (ワード ラップが原因)。

質問: 小さなデバイスで grid-div を chart-div の下に強制的に表示することはできますか?

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8" id="charts">
             some charting
        </div>
        <div class="span4" id="grid">
             table with pager
        </div>
    </div>
</div>
4

2 に答える 2

2

これがメディアクエリの目的です。ブレークポイントを決定し、適切なスタイルを適用します。

/* change the max-width to the width when your table becomes unreadible i.e. 1024px or 768px */
@media screen and (max-width: 1024px){
    #charts, #grid{
        width:100%;
    }
}

これは、Bootstrap が bootstrap-responsive.css で行う方法です。

于 2012-12-08T23:13:06.867 に答える
0

私はmin-widthあなたのチャートdivにを設定します：

#charts { min-width: 400px /*replace this with a value that works for you*/; }

これにより、テーブルが読み取れなくなるまで折りたたまれるのを防ぐことができます。

于 2012-12-08T21:11:50.180 に答える