素材デザインライト。グリッド・システム予期しない動作のすべての画像の

Question

まず：

これはgetmdl.ioから画面です。私はこの行動を理解できません。私は悲しい、私が望むことは正確に行の3つの列幅のそれぞれの1/3行の幅に等しい。しかし、いくつかの画面解像度では、列の幅は行の幅の半分に等しい。これはメディアのクエリに基づくCSSの指示に由来し、それは設計によるようです。

私の質問は、この現象を防ぐことができますか？もしそうでなければ、その行動の理由は何か。

P.S.私はブートストラップから来て、私はこの問題を持っていませんでした。

Answer 1

あなたがモバイルで3つのカラムを持つことを主張する場合、@ JyotiPathaniaが提案するようにクラスをオーバーライドする必要があります。

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

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

Answer 2

はいあなただけのカスタムクラス "カスタム幅" を追加MDLのスタイルをオーバーライドすることで、この問題を防ぐことができます。

HTML：

<div class="mdl-grid"> 
    <div class="mdl-cell mdl-cell--4-col custom-width">4</div> 
    <div class="mdl-cell mdl-cell--4-col custom-width">4</div> 
    <div class="mdl-cell mdl-cell--4-col custom-width">4</div> 
</div> 

はCSS：

.custom-width { 
    width: calc(33.3333% - 16px) !important; 
} 

と答えを2番目の質問は、現在のビューポートサイズに応じて動作するためです：

De sktop：

.mdl-cell--4-col, .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop { 
    width: calc(33.3333% - 16px); 
} 

タブレット：

.mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet { 
    width: calc(50% - 16px); 
} 

モバイル：これはあなたを助けるかもしれない

.mdl-cell--4-col, .mdl-cell--4-col-mobile.mdl-cell--4-col-mobile { 
    width: calc(100% - 16px); 
} 

希望。詳細については、ドキュメントを参照してくださいmdl grid