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)

— 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

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>

codepen.io/_yatko/pen/ZJXQxy

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

-

Tersembunyi di semua .d-none
Tersembunyi hanya di xs .d-none .d-sm-block
Tersembunyi hanya di sm .d-sm-none .d-md-block
Tersembunyi hanya di md .d-md-none .d-lg-block
Tersembunyi hanya di lg .d-lg-none .d-xl-block
Tersembunyi hanya di xl .d-xl-none
Terlihat di semua .d-block
Hanya dapat dilihat di xs .d-block .d-sm-none
Hanya dapat dilihat di sm .d-none .d-sm-block .d-md-none
Hanya dapat dilihat di md .d-none .d-md-block .d-lg-none
Hanya bisa dilihat di lg .d-none .d-lg-block .d-xl-none
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