css - マテリアル デザイン ライト。グリッド システムの予期しない動作

Question

まず第一に写真：

これはgetmdl.ioの画面です。この振る舞いが理解できません。悲しいことに、それぞれの幅が行幅の 1/3 に等しい行に正確に3 列が必要です。ただし、一部の画面解像度では、列の幅が行幅の半分に等しくなります。これは、メディア クエリに基づく CSS 命令に由来するものであり、仕様によるものと思われます。

私の質問は、この動作を防ぐことはできますか? そうでない場合、その行動の理由は何ですか。

PS私はブートストラップから来ましたが、この問題はありませんでした。

Answer 1

モバイルで 3 つの列を持つことを主張する場合は、@ JyotiPathania の提案に従ってクラスをオーバーライドする必要があります。

Material Design Liteグリッド システムは とはまったく異なることを忘れないでくださいBootstrap。Bootstrap12 列固定で、すべてのビューポートで縮小されています。対照的に、Material Design Liteデスクトップ用に 12 個、タブレット用に 8 個、モバイル用に 4 個あります。そのため、a.mdl-cell--4-colはデスクトップでは画面の 1/3、タブレットでは 1/2、モバイルでは画面全体を占めます。

私の提案は、BootstrapデフォルトMDLのクラスを考えたりオーバーライドしたりすることを避け、フレームワークの設計上の決定を受け入れるようにすることです。それ以外の場合は、カスタムを使用する方がよいでしょうBootstrap MDL theme。