Fehlende sichtbare - ** und versteckte - ** in Bootstrap v4

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?

Update für Bootstrap 4 (2018)

Die Klassen hidden-*und sind in Bootstrap 4 nicht mehr vorhanden. Wenn Sie ein Element auf bestimmten Ebenen oder Haltepunkten in Bootstrap 4 ausblenden möchten, verwenden Sie die Anzeigeklassen entsprechend.visible-*d-*

Denken Sie daran, dass extra klein / mobil (früher xs) der Standard-Haltepunkt (implizit) ist, sofern er nicht durch einen größeren Haltepunkt überschrieben wird . Daher ist das -xsInfix in Bootstrap 4 nicht mehr vorhanden .

Ein- / Ausblenden für Haltepunkt und nach unten :

• hidden-xs-down (hidden-xs) = d-none d-sm-block
• hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
• hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down(n / a 3.x) = d-none(wie hidden)

Ein- / Ausblenden für Haltepunkte und höher :

• hidden-xs-up= d-none(wie hidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up (n / a 3.x) = d-xl-none

Nur für einen einzelnen Haltepunkt ein- / ausblenden :

• hidden-xs(nur) = d-none d-sm-block(wie hidden-xs-down)
• hidden-sm (nur) = d-block d-sm-none d-md-block
• hidden-md (nur) = d-block d-md-none d-lg-block
• hidden-lg (nur) = d-block d-lg-none d-xl-block
• hidden-xl (n / a 3.x) = d-block d-xl-none
• visible-xs (nur) = d-block d-sm-none
• visible-sm (nur) = d-none d-sm-block d-md-none
• visible-md (nur) = d-none d-md-block d-lg-none
• visible-lg (nur) = d-none d-lg-block d-xl-none
• visible-xl (n / a 3.x) = d-none d-xl-block

Demo der responsiven Anzeigeklassen in Bootstrap 4

Auch beachten Sie, dass d-*-blockmit ausgetauscht werden kann d-*-inline, d-*-flex, d-*-table-cell, d-*-tableetc .. je nach Displaytyp des Elements. Lesen Sie mehr über die Anzeigeklassen

Leider wurden alle Klassen hidden-*-upund hidden-*-downaus 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/#utilities

Ich 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:

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

Die Klassen hidden-unless-*waren nicht in Bootstrap 3 enthalten, aber sie sind auch nützlich und sollten selbsterklärend sein.

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-noneKlasse oder eine der d-{sm,md,lg,xl}-noneKlassen. Kombinieren Sie die oben genannten Klassen mit d-blockoder , um Spalten auf bestimmten Bildschirmgrößen anzuzeigend-{sm,md,lg,xl}-block Klassen .

Beispiele sind:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Mehr davon hier .

Ich erwarte nicht, dass mehrere Divs eine gute Lösung sind.

Ich denke auch , können Sie ersetzen .visible-sm-blockmit .hidden-xs-downund .hidden-md-up(oder .hidden-sm-downund .hidden-lg-upauf den gleichen Medien - Anfragen zu handeln).

hidden-sm-up kompiliert in:

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-downund .hidden-lg-upkompiliert in:

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

Beide Situationen sollten gleich sein.

Ihre Situation wird anders, wenn Sie versuchen, .visible-sm-blockund zu ersetzen .visible-lg-block. In den Bootstrap v4-Dokumenten erfahren Sie:

Diese Klassen versuchen nicht, weniger häufige Fälle zu berücksichtigen, in denen die Sichtbarkeit eines Elements nicht als einzelner zusammenhängender Bereich von Haltepunktgrößen für Ansichtsfenster ausgedrückt werden kann. In solchen Fällen müssen Sie stattdessen benutzerdefiniertes CSS verwenden.

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}

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:

// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-only{
    @include media-breakpoint-only($bp){
      display:none !important;
    }
  }
}

In meinem Fall habe ich diesen Teil in eine _custom.scssDatei eingefügt, die an dieser Stelle im bootstrap.scss:

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Sie müssen nun die Größe des ausgeblendeten Objekts als solches definieren

.hidden-xs-down

Versteckt alles vor xs und kleiner, nur xs

.hidden-xs-up

Wird alles verstecken

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

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.

Leider funktionieren diese neuen Bootstrap 4-Klassen nicht wie die alten auf einem Div, collapseda sie das sichtbare Div festlegen, blockdas sichtbar und nicht versteckt beginnt, und wenn Sie ein zusätzliches Div um die collapseFunktionalität hinzufügen, funktioniert dies nicht mehr.

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>