bootstrap 4 duyarlı yardımcı programlar görünür / gizli xs sm lg çalışmıyor

101

Bootstrap 4'e geçerken yeni yanıt veren yardımcı programlar gizli / görünür sınıflarla ilgili bir sorun yaşanıyor . Ben .hidden- sınıflar edilmiş farkındayım v3 kaldırılır ve yerine sahip .hidden-*-up .hidden-*-down. Yeni .hidden-*-up.hidden-*-downsınıfları kullanıyor ancak öğeler görünür / gizli olarak değişmiyor. Nedenini anlayamıyorum.

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

* Ekran boyutundan bağımsız olarak bu örnekte hiçbir şey gizli değildir (Safari, Duyarlı Tasarım Modu)

twitter-bootstrap  twitter-bootstrap-3  hide  hidden  twitter-bootstrap-4 
— Yatko
kaynak
2
— Rob
@Rob fuarı;) değişti.
— Yatko
Soruna neden olan işaretlemenin asgari bir örneğini göndermeniz gerekmektedir: tekrarlanabilir minimum örnek "Öğelerin" ne olduğu konusunda hiçbir fikrimiz yok.
— Rob
Bootstrap 4 ve HTML örneğinizi içeren bir codepen kurun: codepen.io/esr360/pen/prWjYv . "Ekran boyutundan bağımsız olarak bu örnekte hiçbir şey gizli değildir" iddianız yanlıştır.
— ESR
@EdmundReed evet, beni çılgına çeviriyor: Basit bir örnekle denedim, Mac'imde çalıştım, senkronizasyondan hemen sonra çalışmayı bıraktım ... önbelleği denedim, hatta herhangi bir önbelleği
— elemek

Yanıtlar:

231

Bootstrap ile 4 .hidden-* sınıflar tamamen kaldırıldı (evet, yerine geçtiler hidden-*-*ancak bu sınıflar da v4 alfadan kaldırıldı ).

V4-beta ile başlayarak , aynı sonucu elde etmek için birleştirebilir .d-*-noneve .d-*-blocksınıflayabilirsiniz.

visible- * da kaldırıldı ; açık .visible-*sınıflar kullanmak yerine , öğeyi gizlemeyerek görünür yapın (yine .d-none .d-md-bloğu kombinasyonlarını kullanın). İşte çalışan örnek:

<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"olur class="d-none d-sm-block"(veya d-none d-sm-inline-blok ) ...

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

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

Bootstrap 4 uyumlu yardımcı programlara bir örnek :

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

Dokümantasyon

— Yatko
kaynak
1
Bunu bulamamamın nedeni, v4 beta birkaç gün önce yayınlandı ve tüm Google endeksli sonuçlar sizi hala v4-
— alpha'ya getiriyor
2
"D" = varsayıyorum display.
— user20232359723568423357842364
18
neden bu kadar sezgisel olmayan, çığır açan bir değişiklik getirsinler? herhangi bir açıklama?
— szaman
3
@rrrafalsz Ben de aynı şeyi merak ettim. Bu, alfada sahip oldukları önceki "görünür-yukarı / aşağı" dan geriye doğru gereksiz yere karmaşık bir adım gibi görünüyor. Sebebini bilmek ilginç olurdu.
— Katai
Örneğinizde, DIV'lerden hangilerinin görünüp hangilerinin görünmeyeceğini net bir şekilde yorumlayabilir misiniz? Biraz zaman aldı ve yorum yaparsam, doğru olup olmadığından emin değilim. teşekkürler
— helle
54

Ekran Boyutu Sınıfı

-

  1. Tüm .d-none üzerinde gizli

  2. Yalnızca xs .d-none .d-sm-bloğunda gizli

  3. Yalnızca sm .d-sm-none .d-md-bloğunda gizli

  4. Yalnızca md .d-md-none .d-lg-bloğunda gizli

  5. Yalnızca lg .d-lg-none .d-xl-bloğunda gizli

  6. Yalnızca xl .d-xl-none üzerinde gizli

  7. Tüm .d bloklarında görülebilir

  8. Yalnızca xs .d-block .d-sm-none üzerinde görünür

  9. Yalnızca sm .d-none .d-sm-block .d-md-none üzerinde görünür

  10. Yalnızca md .d-none .d-md-block .d-lg-none üzerinde görülebilir

  11. Yalnızca lg .d-none .d-lg-block .d-xl-none üzerinde görünür

  12. Yalnızca xl .d-none .d-xl-bloğunda görünür

Bu bağlantıya bakın http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

4.5 bağlantı: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

— Vinod Chauhan
kaynak
1
Bu teorik olarak soruya cevap görülebilir fakat tercih edildiğini burada cevabın temel parçalarını kapsadığı ve başvuru için bağlantı sağlar.
— Rick
6

Bootstrap 4 (^ beta), öğeleri duyarlı gizleme / gösterme sınıflarını değiştirdi. Kullanılacak doğru sınıflar için bu bağlantıya bakın: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

— jross
kaynak
2
Teşekkür ederim. Bootstrap, en azından arşivlemek için eski içeriği kaldırabilir, böylece toplam nooblar (benim gibi) yığınta bu yanıtı bulmadan önce 123523532 olası çözümlere gitmek zorunda kalmazlar. Son birkaç yıldır yığın taşması google'dan daha kullanışlı, bu yüzden insanlar google kullan dediklerinde ... hayır diyorum, yığın kullan .. Daha hızlı ve daha kullanışlı.
— Mavi
0

Bazı sürümler çalışıyor

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
— Sınırsız isa
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.