bootstrap 4 utilitas responsif terlihat / tersembunyi xs sm lg tidak berfungsi

96

Memiliki masalah dengan utilitas responsif baru yang tersembunyi / kelas terlihat , saat bermigrasi ke Bootstrap 4 . Saya sadar bahwa kelas .hidden- telah dihapus dari v3 dan diganti dengan .hidden-*-up .hidden-*-down. Menggunakan .hidden-*-up.hidden-*-downkelas baru tetapi elemen tidak berubah menjadi terlihat / tersembunyi. Tidak tahu kenapa.

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

* tidak ada yang disembunyikan dalam contoh ini, terlepas dari ukuran layarnya (Safari, Mode Desain Responsif)

twitter-bootstrap twitter-bootstrap-3 hide hidden twitter-bootstrap-4 Yatko
sumber
2
Dan pertanyaan Anda adalah apa? stackoverflow.com/help/how-to-ask
Rob
@Rob fair;) berubah.
Yatko
Anda diminta untuk mengirim contoh minimal markup yang menyebabkan masalah: contoh minimal yang dapat direproduksi Kami tidak tahu apa itu "elemen".
Rob
Siapkan codepen yang berisi Bootstrap 4 dan contoh HTML Anda: codepen.io/esr360/pen/prWjYv . Klaim Anda tentang "tidak ada yang disembunyikan dalam contoh ini, berapa pun ukuran layarnya" tidak benar.
ESR
@EdmundReed ya, itu membuat saya gila: Saya mencoba dengan contoh sederhana, berfungsi di mac saya, berhenti berfungsi setelah sinkronisasi ... mencoba cache, bahkan ISP yang berbeda untuk mengesampingkan cache apa pun
Yatko

Jawaban:

227

Dengan Bootstrap 4 .hidden-* kelas benar-benar dihapus (ya, mereka digantikan oleh hidden-*-*tetapi mereka kelas juga pergi dari v4 Alpha).

Dimulai dengan v4-beta, Anda dapat menggabungkan .d-*-nonedan .d-*-blockkelas untuk mencapai hasil yang sama.

terlihat- * telah dihapus juga; daripada menggunakan .visible-*kelas eksplisit , buat elemen terlihat dengan tidak menyembunyikannya (sekali lagi, gunakan kombinasi .d-none .d-md-block). Berikut adalah contoh kerjanya:

<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"menjadi class="d-none d-sm-block"(atau 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>

Contoh utilitas responsif 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>

Dokumentasi

Yatko
sumber
1
Alasan mengapa saya tidak dapat menemukan ini, v4 beta diterbitkan beberapa hari yang lalu dan semua hasil yang diindeks Google masih membawa Anda ke v4-alpha, entah bagaimana saya mendapatkan tautan CDN baru tetapi sisanya masih
-alpha
2
Saya berasumsi "d" = display.
pengguna20232359723568423357842364
17
mengapa mereka memperkenalkan perubahan yang tidak intuitif dan mendobrak? ada penjelasan?
szaman
3
@rrrafalsz Saya bertanya-tanya tentang hal yang sama. Ini tampak seperti langkah mundur rumit yang tidak perlu dari "terlihat-sm-atas / bawah" sebelumnya yang mereka miliki di alfa. Akan menarik untuk mengetahui alasannya.
Katai
Bisakah Anda berkomentar dengan jelas dalam contoh Anda, DIV mana yang akan terlihat dan mana yang tidak? Butuh beberapa saat, dan saya tidak yakin, jika saya berkomentar, apakah itu benar. terima kasih
helle
52

Kelas Ukuran Layar

-

  1. Tersembunyi di semua .d-none

  2. Tersembunyi hanya di xs .d-none .d-sm-block

  3. Tersembunyi hanya di sm .d-sm-none .d-md-block

  4. Tersembunyi hanya di md .d-md-none .d-lg-block

  5. Tersembunyi hanya di lg .d-lg-none .d-xl-block

  6. Tersembunyi hanya di xl .d-xl-none

  7. Terlihat di semua .d-block

  8. Hanya dapat dilihat di xs .d-block .d-sm-none

  9. Hanya dapat dilihat di sm .d-none .d-sm-block .d-md-none

  10. Hanya dapat dilihat di md .d-none .d-md-block .d-lg-none

  11. Hanya bisa dilihat di lg .d-none .d-lg-block .d-xl-none

  12. Hanya dapat dilihat di xl .d-none .d-xl-block

Lihat tautan ini http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

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

Vinod Chauhan
sumber
1
Meskipun ini secara teoritis dapat menjawab pertanyaan, akan lebih baik jika menyertakan bagian penting dari jawaban di sini, dan menyediakan tautan untuk referensi.
Rick
6

Bootstrap 4 (^ beta) telah mengubah kelas untuk menyembunyikan / menampilkan elemen secara responsif. Lihat tautan ini untuk kelas yang benar untuk digunakan: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

jross
sumber
2
Terima kasih. Bootstrap dapat menghapus konten lama setidaknya untuk mengarsipkan sehingga total noobs (seperti saya) tidak perlu melalui solusi 123523532 yang mungkin sebelum menemukan jawaban ini di tumpukan. Selama beberapa tahun terakhir, stack overflow lebih berguna daripada google, jadi ketika orang mengatakan gunakan google ... saya katakan tidak, gunakan stack .. Lebih cepat dan lebih bermanfaat.
Biru
0

Beberapa versi berfungsi

<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
Isa tak terbatas
sumber