2017-05-30 5 views
0

だから、ドキュメントごととしての私の理解では、ブートストラップグリッドシステムが期待通りに応答しない

SM = iPadやその他のタブレット

MD =小さいラップトップ

LGの携帯電話のような

XS =小さかったです=大きなラップトップと大きなデスクトップ

<div class="col-xs-12 col-md-4 col-lg-3"> 
     <div class="thumbnail"></div> 
     ...... 
</div> 

私は、私の携帯電話では、アイテムがどちらの側にも "溝"を持って全幅を取ることを期待しています。

タブレット(sm)では、以前のxsの宣言を選択すると予想されますので、12列全体を使用する必要があります。私は "sm"の何も指定していないので

ノートパソコン(md)では3つのアイテムが必要です。

と大きい(lg)スクリーンでは、1行につき4つのアイテムがあります。

私が応答性をテストするために使用している方法は、単にブラウザを調整することです。私がウィンドウを縮小すると、最小値(xsとsm)がオーバーフローしてアイテム全体を見ることができないとき、アイテムが行ごとに1つのアイテムになるということです。

私は間違って何をしていますか、グリッドシステムの背後にある理論を誤解しましたか?

+0

継承の順番はLG> MD> SM> XSです。逆の場合は、XSがSMに移動することを期待しています。 –

+0

これを読んでくださいhttp://getbootstrap.com/css/#grid – j08691

+0

あなたが望むものと実際に達成したものを表示する写真はありますか? –

答えて

0

多少の間違いがあると思います。 XSとSMのための全幅---- >> COL-XS-12については

十分なはずですあなたがMDのために、行ごとに4つのアイテムが必要なので、あなたの代わりにcol-のCOL-MD-3を書く必要がありますmd-4(数字3は1列に12列のうちどれが占めるかを示しているので、3列を占める--- 12/3 = 1行につき4項目)

3 lgの行ごとの項目----> col-lg-4

大きな画面で解決する必要があります。

また、申し訳ありませんが、私はあなたがオーバーフローについて言ったことを完全に理解していませんでした。あなたのコードや実装しようとしているものの写真を私に見せることができたら、私は何かを伝えることができました。

関連する問題