2016-08-20 10 views
0

allererst ein Bild:Material Design Licht. Grid System unerwartetes Verhalten

enter image description here

Dies ist ein Bildschirm von getmdl.io. Ich kann dieses Verhalten nicht verstehen. Ich bin traurig, dass ich will genau 3 Spalte in einer Reihe mit der Breite von jedem entspricht 1/3 der Breite der Reihe. Bei einigen Bildschirmauflösungen entspricht die Spaltenbreite jedoch der halben Zeilenbreite. Dies kommt von CSS-Anweisungen basierend auf Medienabfragen und scheint es von Entwurf zu sein.

Also meine Frage ist, kann ich dieses Verhalten verhindern? Wenn nicht, was ist der Grund für dieses Verhalten?

P.S. Ich bin von Bootstrap gekommen und ich hatte dieses Problem nicht.

Antwort

1

Es gibt keine Möglichkeit zu erreichen, was Sie out-of-the-Box-Weg beschrieben haben, wenn Sie darauf bestehen, 3 Spalten in Handy müssen Sie die Klasse überschreiben, wie von @JyotiPathania vorgeschlagen.

Denken Sie daran, Material Design Lite Raster-System ist völlig anders als Bootstrap. Bootstrap hat eine feste 12 Spalten und verkleinert für alle Ansichtsfenster. Im Gegensatz dazu hat Material Design Lite 12 für Desktop, 8 für Tablets und 4 für mobile. So nimmt ein .mdl-cell--4-col 1/3 des Bildschirms auf dem Desktop, 1/2 von Tablet und ganzen Bildschirm für mobile.

Mein Vorschlag ist zu vermeiden, in Bootstrap Denken und überschreiben Standard MDL Klasse, versuchen, die Rahmenkonstruktion Entscheidung zu umarmen. Andernfalls verwenden Sie besser eine benutzerdefinierte Bootstrap MDL theme.

0

Ja können Sie dieses Problem verhindern, indem die mdl Stile überschreiben nur eine benutzerdefinierte Klasse "custom-Breite" hinzufügen:

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; 
} 

und Antwort zu deiner zweiten Frage ist wegen mdl verhalten sich entsprechend aktueller Darstellungsgröße:

De sktop:

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

Tablet:

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

Mobil:

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

Hope this Sie helfen könnte. Weitere Informationen finden Sie in der Dokumentation mdl grid

+0

Es ist klar für mich. Aber es macht {4} nutzlos, weil {4} tatsächlich zu {6} oder etwas anderem wird und ich kann es ohne einen Hack nicht verhindern. Ja, "! Wichtig" ist ein schmutziger Hack und es ist der schlechte Weg, um Funktion zu bekommen, die ich will. – user3272018