bootstrap 4 utilitários responsivos visíveis / ocultos xs sm lg não funcionando

96

Tendo um problema com os novos utilitários responsivos classes ocultas / visíveis , ao migrar para o Bootstrap 4 . Estou ciente de que as classes .hidden foram removidas da v3 e substituídas por .hidden-*-up .hidden-*-down. Usando as novas .hidden-*-up.hidden-*-downclasses, mas os elementos não estão mudando para visíveis / ocultos. Não consigo descobrir 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 neste exemplo, independentemente do tamanho da tela (Safari, Modo de Design Responsivo)

— Yatko
fonte

2

E sua pergunta é o quê? stackoverflow.com/help/how-to-ask

— Rob

@Rob fair;) mudou.

— Yatko

Você deve postar um exemplo mínimo da marcação que causa o problema: exemplo mínimo reproduzível Não temos idéia do que são "os elementos".

— Rob

Configure um codepen contendo Bootstrap 4 e seu exemplo HTML: codepen.io/esr360/pen/prWjYv . Sua afirmação de "nada está oculto neste exemplo, independentemente do tamanho da tela" está incorreta.

— ESR

@EdmundReed sim, isso me deixa louco: eu tentei com um exemplo simples, funciona no meu mac, para de funcionar logo após a sincronização ... tentei o cache, até mesmo um ISP diferente para descartar qualquer cache

— Yatko

227

Com o Bootstrap 4, as .hidden-* classes foram completamente removidas (sim, elas foram substituídas, hidden-*-*mas essas classes também foram retiradas dos alfas v4).

Começando com a v4-beta, você pode combinar .d-*-nonee .d-*-blockclasses para obter o mesmo resultado.

visible- * também foi removido ; em vez de usar .visible-*classes explícitas , torne o elemento visível não ocultando-o (novamente, use combinações de .d-none .d-md-block). Aqui está o exemplo de trabalho:

<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"torna-se class="d-none d-sm-block"(ou d-none d-sm-inline-block ) ...

<span class="d-none d-sm-inline">hidden-xs</span>

<span class="d-none d-sm-inline-block">hidden-xs</span>

Um exemplo de utilitários responsivos 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>

codepen.io/_yatko/pen/ZJXQxy

Documentação

— Yatko
fonte

1

A razão pela qual não consegui encontrar isso é que a versão beta da v4 foi publicada há alguns dias e todos os resultados indexados pelo Google ainda trazem para a v4-alfa. De alguma forma, obtive o novo link do CDN, mas todo o resto ainda era -alfa

— Yatko

2

Presumo que "d" = display.

— user20232359723568423357842364

16

por que eles introduziriam uma mudança tão inovadora e não intuitiva? alguma explicação?

— szaman

3

@rrrafalsz Já me perguntei sobre a mesma coisa. Isso parece um retrocesso desnecessariamente complicado em relação ao "visível-sm-para cima / para baixo" anterior que eles tinham no alfa. Seria interessante saber o motivo.

— Katai

Você poderia comentar claramente em seu exemplo, quais dos DIVs estarão visíveis e quais não são? Demorei um pouco, e não tenho certeza, se comentar, se isso seria certo. obrigado

— helle

51

Classe de tamanho da tela

-

Oculto em todos .d-nenhum
Oculto apenas em xs .d-none .d-sm-block
Oculto apenas em sm .d-sm-none .d-md-block
Oculto apenas em md .d-md-none .d-lg-block
Oculto apenas em lg .d-lg-none .d-xl-block
Oculto apenas em xl .d-xl-none
Visível em todos os blocos .d
Visível apenas em xs .d-block .d-sm-none
Visível apenas em sm .d-none .d-sm-block .d-md-none
Visível apenas em md .d-none .d-md-block .d-lg-none
Visível apenas em lg .d-none .d-lg-block .d-xl-none
Visível apenas em xl .d-none .d-xl-block

Consulte este link http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

4.5 link: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

— Vinod Chauhan
fonte

1

Embora isso possa teoricamente responder à pergunta, seria preferível incluir as partes essenciais da resposta aqui e fornecer o link para referência.

— Rick

6

Bootstrap 4 (^ beta) mudou as classes para ocultar / mostrar elementos responsivos. Veja este link para as classes corretas a serem usadas: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

— Jross
fonte

2

Obrigado. O bootstrap pode remover conteúdo antigo pelo menos para arquivar, de forma que novatos (como eu) não tenham que passar por 123523532 soluções possíveis antes de encontrar esta resposta na pilha. Nos últimos anos, o estouro de pilha é mais útil do que o google, então quando as pessoas dizem para usar o google ... eu digo não, use o stack .. Mais rápido e mais útil.

— Azul

0

Alguma versão funcionando

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>

— Ilimitada isa
fonte