twitter-bootstrap - not - visible only xs bootstrap 4
Bootstrap 4 utilidades receptivas visibles/ocultas xs sm lg no funcionan (4)
Tener un problema con las nuevas utilidades receptivas
clases ocultas / visibles
, al migrar a
Bootstrap 4
.
Soy consciente de que las clases .hidden- se han
eliminado de v3 y se han reemplazado
con
.hidden-*-up
.hidden-*-down
.
Usando las nuevas
.hidden-*-up.hidden-*-down
pero los elementos no cambian a visibles / ocultos.
No puedo entender por qué.
<div class="col hidden-xs-down">
<span class="vcard">
…
</span>
</div>
<div class="col hidden-lg-down">
<div class="hidden-sm-down">
…
</div>
<div class="hidden-xs-down">
…
</div>
</div>
* nada está oculto en este ejemplo, independientemente del tamaño de la pantalla (Safari, Modo de diseño receptivo)
**** Clase de tamaño de pantalla ****
-
-
Oculto en todos .d-none
-
Oculto solo en xs .d-none .d-sm-block
-
Oculto solo en sm .d-sm-none .d-md-block
-
Oculto solo en md .d-md-none .d-lg-block
-
Oculto solo en lg .d-lg-none .d-xl-block
-
Oculto solo en xl .d-xl-none
-
Visible en todos los bloques .d
-
Solo visible en xs .d-block .d-sm-none
-
Visible solo en sm .d-none .d-sm-block .d-md-none
-
Visible solo en md .d-none .d-md-block .d-lg-none
-
Solo visible en lg .d-none .d-lg-block .d-xl-none
-
Visible solo en xl .d-none .d-xl-block
Consulte este enlace http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
Alguna versión funcionando
<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
Bootstrap 4 (^ beta) ha cambiado las clases para elementos de ocultación / visualización receptivos. Consulte este enlace para ver las clases correctas a utilizar: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
Con Bootstrap 4
.hidden-*
clases se eliminaron por completo
(sí, se reemplazaron por
hidden-*-*
pero esas clases también se han
eliminado
de v4 alphas).
Comenzando con v4-beta, puede combinar las clases de
.d-*-block
.d-*-none
y
.d-*-block
para lograr el mismo resultado.
visible- * también se eliminó
;
en lugar de usar clases explícitas
.visible-*
, haga que el elemento sea visible al no ocultarlo (nuevamente, use combinaciones de .d-none .d-md-block).
Aquí está el ejemplo de trabajo:
<div class="col d-none d-sm-block">
<span class="vcard">
…
</span>
</div>
<div class="col d-none d-xl-block">
<div class="d-none d-md-block">
…
</div>
<div class="d-none d-sm-block">
…
</div>
</div>
class="hidden-xs"
convierte en
class="d-none d-sm-block"
(o
d-none d-sm-inline-block
) ...
Un ejemplo de utilidades receptivas Bootstrap 4 :
<div class="d-none d-sm-block"> hidden-xs
<div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
<div class="d-none d-lg-block"> visible-lg and up (hidden-md and down)
<div class="d-none d-xl-block"> visible-xl </div>
</div>
</div>
</div>
<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>
<div class="d-xl-none"> hidden-xl (visible-lg and down)
<div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
<div class="d-md-none d-lg-none d-xl-none"> visible-sm and down (or hidden-md and up)
<div class="d-sm-none"> visible-xs </div>
</div>
</div>
</div>