bootstrap 4 responsywne narzędzia widoczne / ukryte xs sm lg nie działają

100

Wystąpił problem z ukrytymi / widocznymi klasami nowych responsywnych narzędzi podczas migracji do Bootstrap 4 . Zdaję sobie sprawę, że klasy .hidden- zostały usunięte z v3 i zastąpione przez.hidden-*-up .hidden-*-down . Używam nowych .hidden-*-up.hidden-*-downklas, ale elementy nie zmieniają się na widoczne / ukryte. Nie mogę zrozumieć, dlaczego.

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

* w tym przykładzie nic nie jest ukryte, niezależnie od rozmiaru ekranu (Safari, Responsive Design Mode)

— Yatko
źródło

2

A twoje pytanie brzmi: co? stackoverflow.com/help/how-to-ask

— Rob

@Rob fair;) zmieniony.

— Yatko

Musisz opublikować minimalny przykład znacznika powodującego problem: minimalny powtarzalny przykład Nie mamy pojęcia, czym są „elementy”.

— Rob

Skonfiguruj kodepen zawierający Bootstrap 4 i Twój przykład HTML: codepen.io/esr360/pen/prWjYv . Twoje twierdzenie „nic nie jest ukryte w tym przykładzie, niezależnie od rozmiaru ekranu” jest niepoprawne.

— ESR

@EdmundReed tak, doprowadza mnie to do szału: próbowałem na prostym przykładzie, działa na moim Macu, przestaje działać zaraz po synchronizacji ... wypróbowałem pamięć podręczną, nawet inny dostawca usług internetowych, aby wykluczyć buforowanie

— Yatko

231

W przypadku Bootstrap 4 .hidden-* klasy zostały całkowicie usunięte (tak, zostały zastąpione przezhidden-*-* ale te klasy również zniknęły z v4 alfa).

Począwszy od wersji 4-beta, możesz łączyć .d-*-nonei.d-*-block klasy, aby osiągnąć ten sam wynik.

widoczne- * również zostało usunięte ; zamiast używać jawnych .visible-*klas, spraw, aby element był widoczny, nie ukrywając go (ponownie użyj kombinacji .d-none .d-md-block). Oto działający przykład:

<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"staje się class="d-none d-sm-block"(lub 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>

Przykład responsywnych narzędzi 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

Dokumentacja

— Yatko
źródło

1

Powód, dla którego nie mogłem tego znaleźć, v4 beta została opublikowana kilka dni temu, a wszystkie indeksowane przez Google wyniki nadal prowadzą do v4-alpha, jakoś dostałem nowy link do CDN, ale cała reszta wciąż była -alfa

— Yatko

2

Zakładam „d” = display.

— user20232359723568423357842364

18

dlaczego mieliby wprowadzać tak nieintuicyjną, przełomową zmianę? jakieś wyjaśnienie?

— szaman

3

@rrrafalsz Zastanawiałem się nad tym samym. Wydaje się to niepotrzebnie skomplikowanym krokiem wstecz w stosunku do poprzedniego „widocznego sm-up / down”, który mieli w alfie. Ciekawie byłoby poznać przyczynę.

— Katai

Czy mógłbyś jasno skomentować w swoim przykładzie, które z DIV będą widoczne, a które nie? Zajęło mi to trochę czasu i nie jestem pewien, czy to skomentuję, czy tak będzie. dzięki

— helle

53

Klasa rozmiaru ekranu

-

Ukryty na wszystkich plikach .d-none
Ukryte tylko na xs .d-none .d-sm-block
Ukryty tylko w sm .d-sm-none .d-md-block
Ukryte tylko w md .d-md-none .d-lg-block
Ukryte tylko w lg .d-lg-none .d-xl-block
Ukryte tylko na xl .d-xl-none
Widoczne na wszystkich blokach .d
Widoczne tylko na xs .d-block .d-sm-none
Widoczne tylko na sm .d-none .d-sm-block .d-md-none
Widoczne tylko na md .d-none .d-md-block .d-lg-none
Widoczne tylko na lg .d-none .d-lg-block .d-xl-none
Widoczne tylko na xl .d-none .d-xl-block

Skorzystaj z tego linku http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Łącze 4.5: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

— Vinod Chauhan
źródło

1

Chociaż może to teoretycznie odpowiedzieć na pytanie, lepiej byłoby zawrzeć tutaj zasadnicze części odpowiedzi i podać link do odniesienia.

— Rick

6

Bootstrap 4 (^ beta) zmienił klasy dla responsywnego ukrywania / pokazywania elementów. Zobacz ten link, aby uzyskać prawidłowe klasy do użycia: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

— jross
źródło

2

Dziękuję Ci. Bootstrap mógłby usunąć starą zawartość przynajmniej w celu zarchiwizowania, więc totalnie noobowie (tacy jak ja) nie muszą przechodzić przez 123523532 możliwych rozwiązań przed znalezieniem odpowiedzi na stosie. Od kilku lat przepełnienie stosu jest bardziej przydatne niż Google, więc kiedy ludzie mówią, że używaj google ... mówię nie, używaj stosu ... Szybciej i bardziej przydatne.

— Blue

0

Niektóre wersje działają

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

— Nieograniczone isa
źródło