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)

twitter-bootstrap twitter-bootstrap-3 hide hidden twitter-bootstrap-4 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

Odpowiedzi:

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>

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

-

  1. Ukryty na wszystkich plikach .d-none

  2. Ukryte tylko na xs .d-none .d-sm-block

  3. Ukryty tylko w sm .d-sm-none .d-md-block

  4. Ukryte tylko w md .d-md-none .d-lg-block

  5. Ukryte tylko w lg .d-lg-none .d-xl-block

  6. Ukryte tylko na xl .d-xl-none

  7. Widoczne na wszystkich blokach .d

  8. Widoczne tylko na xs .d-block .d-sm-none

  9. Widoczne tylko na sm .d-none .d-sm-block .d-md-none

  10. Widoczne tylko na md .d-none .d-md-block .d-lg-none

  11. Widoczne tylko na lg .d-none .d-lg-block .d-xl-none

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