In Bootstrap v3 verwende ich häufig die Klassen hidden - ** in Kombination mit clearfix, um mehrspaltige Layouts bei unterschiedlichen Bildschirmbreiten zu steuern. Zum Beispiel,
Ich könnte mehrere versteckte ** in einem DIV kombinieren, damit meine mehreren Spalten bei unterschiedlichen Bildschirmbreiten korrekt angezeigt werden.
Als Beispiel, wenn ich Reihen von Produktfotos anzeigen wollte, 4 pro Reihe auf größeren Bildschirmen, 3 auf kleineren Bildschirmen, dann 2 auf sehr kleinen Bildschirmen. Die Produktfotos können unterschiedliche Höhen haben, daher benötige ich den Clearfix, um sicherzustellen, dass die Zeilen richtig unterbrochen werden.
Hier ist ein Beispiel in Version 3 ...
http://jsbin.com/tosebayode/edit?html,css,output
Nachdem v4 diese Klassen abgeschafft und durch die sichtbaren / versteckten - ** - Auf / Ab-Klassen ersetzt hat, muss ich anscheinend dasselbe mit mehreren DIVs tun.
Hier ist ein ähnliches Beispiel in Version 4 ...
http://jsbin.com/sagowihowa/edit?html,css,output
Ich bin also von einzelnen DIVs zu mehreren DIVs mit vielen Auf- / Ab-Klassen übergegangen, um dasselbe zu erreichen.
Von...
<div class="clearfix visible-xs-block visible-sm-block"></div>
zu...
<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>
Gibt es eine bessere Möglichkeit, dies in Version 4 zu tun, die ich übersehen habe?
d-initial
so dass Sie die nicht mehr überschreibend-<breakpoint>-hidden
und auf ihren Anfangswert setzen können. Wenn ich ein Element auf kleineren Bildschirmen ausblenden und auf mittleren und größeren Bildschirmen anzeigen möchte, ohne die anfängliche Anzeige zu kennen (die dynamisch sein kann), kann ich seinen Wert nicht wiederherstellen. Daran haben sie nicht gedacht.Leider wurden alle Klassen
hidden-*-up
undhidden-*-down
aus Bootstrap entfernt (ab Bootstrap Version 4 Beta existierten diese Klassen in Version 4 Alpha und Version 3 noch).Stattdessen sollten neue Klassen
d-*
verwendet werden, wie hier erwähnt: https://getbootstrap.com/docs/4.0/migration/#utilitiesIch fand heraus, dass der neue Ansatz unter bestimmten Umständen weniger nützlich ist. Der alte Ansatz bestand darin, Elemente auszublenden , während der neue Ansatz darin besteht, ZEIGEN Elemente. Das Anzeigen von Elementen ist mit CSS nicht so einfach, da Sie wissen müssen, ob das Element als Block, Inline, Inline-Block, Tabelle usw. angezeigt wird.
Möglicherweise möchten Sie die früheren "Hidden- *" - Stile, die aus Bootstrap 3 bekannt sind, mit diesem CSS wiederherstellen:
Die Klassen
hidden-unless-*
waren nicht in Bootstrap 3 enthalten, aber sie sind auch nützlich und sollten selbsterklärend sein.quelle
Bootstrap v4.1 verwendet neue Klassennamen, um Spalten in ihrem Rastersystem auszublenden.
Verwenden Sie zum Ausblenden von Spalten abhängig von der Bildschirmbreite die
d-none
Klasse oder eine derd-{sm,md,lg,xl}-none
Klassen. Kombinieren Sie die oben genannten Klassen mitd-block
oder , um Spalten auf bestimmten Bildschirmgrößen anzuzeigend-{sm,md,lg,xl}-block
Klassen .Beispiele sind:
Mehr davon hier .
quelle
Ich erwarte nicht, dass mehrere Divs eine gute Lösung sind.
Ich denke auch , können Sie ersetzen
.visible-sm-block
mit.hidden-xs-down
und.hidden-md-up
(oder.hidden-sm-down
und.hidden-lg-up
auf den gleichen Medien - Anfragen zu handeln).hidden-sm-up
kompiliert in:.hidden-sm-down
und.hidden-lg-up
kompiliert in:Beide Situationen sollten gleich sein.
Ihre Situation wird anders, wenn Sie versuchen,
.visible-sm-block
und zu ersetzen.visible-lg-block
. In den Bootstrap v4-Dokumenten erfahren Sie:quelle
Der Benutzer Klaro schlug vor, die alten Sichtbarkeitsklassen wiederherzustellen, was eine gute Idee ist. Leider hat ihre Lösung in meinem Projekt nicht funktioniert.
Ich denke, dass es eine bessere Idee ist, das alte Bootstrap-Mixin wiederherzustellen, da es alle Haltepunkte abdeckt, die vom Benutzer individuell definiert werden können.
Hier ist der Code:
In meinem Fall habe ich diesen Teil in eine
_custom.scss
Datei eingefügt, die an dieser Stelle imbootstrap.scss
:quelle
display: block
was in bestimmten Szenarien den Fluss unterbricht.http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
Sie müssen nun die Größe des ausgeblendeten Objekts als solches definieren
Versteckt alles vor xs und kleiner, nur xs
Wird alles verstecken
quelle
Für Bootstrap 4 finden Sie hier ein Matrixbild, in dem die Klassen zum Ein- und Ausblenden von Elementen erläutert werden. Dies hängt von der Bildschirmgröße ab:
Quelle: Meduim: Bootstrap 4 Hidden & Visible
quelle
Bootstrap 4, um den gesamten Inhalt auszublenden, verwenden Sie diese Klasse '.d-none'. Es wird alles ausgeblendet, unabhängig von den Haltepunkten, die mit der vorherigen Bootstrap-Versionsklasse '.hidden' identisch sind.
quelle
Leider funktionieren diese neuen Bootstrap 4-Klassen nicht wie die alten auf einem Div,
collapse
da sie das sichtbare Div festlegen,block
das sichtbar und nicht versteckt beginnt, und wenn Sie ein zusätzliches Div um diecollapse
Funktionalität hinzufügen, funktioniert dies nicht mehr.quelle
quelle