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

289

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?

Johna
quelle

Antworten:

778

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

Zim
quelle
1
Ich habe diese Änderung bei der Veröffentlichung der Beta entdeckt und denke, dass dies viel besser ist als in den Alpha-Versionen. Vielen Dank für das Hinzufügen der Antwort - ich werde als Lösung markieren.
Johna
22
@ Johna es ist schlimmer - obwohl. Es gibt keine, d-initialso dass Sie die nicht mehr überschreiben d-<breakpoint>-hiddenund 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.
Yates
11
Das schlechteste Update aller Zeiten. Wie geht man von einem super-intuitiven "sprechenden" Konzept zu etwas so Kryptischem? Öffnen Sie ein Problem dafür. Sie hätten zumindest die alten Klassen koexistieren lassen können.
Andreas
4
Ich bin tatsächlich überrascht, wie schwer es war, diese Antwort zu finden.
Anthony
2
@ Andreas Ich stimme voll und ganz zu, dies ist meiner Meinung nach schlechtes Design
Anthony
35

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.

Klaro
quelle
Funktioniert dies immer noch mit der aktuellen Version von B4? Dieser Sichtbarkeits-Mist ist einer der Hauptgründe, warum ich mich nicht darum gekümmert habe, mich zu bewegen. Ich bin manchmal sehr verwirrt, wenn ich programmiere, und das hat mir nur den Kopf verdreht. (Ich bin 64, also gib mir eine Pause!) Auch (will nicht frech sein), aber hast du ein Äquivalent für sichtbar? V nützlich, um beide IMHO (oder die Art, wie ich sowieso
codiere
24

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 .

sdabrutas
quelle
4

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;
  }
}
Bass Jobsen
quelle
4

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";
[..]
Michael Walter
quelle
1
Sehr hilfreich! Der Bootstrap 4-Weg scheint ein kleines Rätsel zu sein, außerdem wird hinzugefügt, display: blockwas in bestimmten Szenarien den Fluss unterbricht.
Luke
3

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

Kyle Selman
quelle
Ja, ich habe diese in meinem v4-Beispiel verwendet, aber das Problem ist, dass ich jetzt mehrere DIVs benötige, wo ich in v3 mit einem arbeiten könnte ...
johna
6
Diese Lösung ist veraltet und gilt nur für Bootstrap V4 Alpha, für Beta und danach. Leider müssen diese wie in den obigen Abschnitten angegeben ersetzt werden
Marc Magon
3

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: Geben Sie hier die Bildbeschreibung ein

Quelle: Meduim: Bootstrap 4 Hidden & Visible

Faouzi
quelle
Diese Tabelle ist sehr hilfreich
Csaba Toth
Hier ist ein Live-Link aus dem Medium-Artikel auf Codeply: codeply.com/embed/…
Csaba Toth
1

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.

Lasantha
quelle
0

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.

Scotty G.
quelle
0
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>
Knarren Meng
quelle