Hilang terlihat - ** dan disembunyikan

289

Di Bootstrap v3 saya sering menggunakan tersembunyi - ** kelas dikombinasikan dengan clearfix untuk mengontrol tata letak multi kolom pada lebar layar yang berbeda. Sebagai contoh,

Saya dapat menggabungkan banyak yang tersembunyi - ** dalam satu DIV untuk membuat multi kolom saya tampil dengan benar pada lebar layar yang berbeda.

Sebagai contoh jika saya ingin menampilkan deretan foto produk, 4 per baris pada ukuran layar yang lebih besar, 3 pada layar yang lebih kecil, kemudian 2 pada layar yang sangat kecil. Foto-foto produk mungkin ketinggian yang berbeda jadi saya perlu perbaikan jelas untuk memastikan baris rusak dengan benar.

Berikut ini contoh dalam v3 ...

http://jsbin.com/tosebayode/edit?html,css ,output

Sekarang v4 telah menghilangkan semua kelas ini, dan menggantinya dengan kelas yang terlihat / tersembunyi - ** - naik / turun saya tampaknya harus melakukan hal yang sama dengan beberapa DIV.

Berikut contoh serupa di v4 ...

http://jsbin.com/sagowihowa/edit?html,css ,output

Jadi saya telah beralih dari DIV tunggal ke harus menambahkan beberapa DIV dengan banyak kelas naik / turun untuk mencapai hal yang sama.

Dari...

<div class="clearfix visible-xs-block visible-sm-block"></div>

untuk...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

Apakah ada cara yang lebih baik untuk melakukan ini di v4 yang saya abaikan?

twitter-bootstrap bootstrap-4

— johna
sumber

778

Pembaruan untuk Bootstrap 4 (2018)

The hidden-*dan visible-*kelas tidak lagi ada di Bootstrap 4. Jika Anda ingin menyembunyikan elemen pada tingkatan tertentu atau breakpoints di Bootstrap 4, menggunakan d-* kelas display sesuai.

Ingat bahwa extra-small / mobile (sebelumnya xs) adalah breakpoint default (tersirat), kecuali diganti oleh breakpoint yang lebih besar . Oleh karena itu, para -xsinfiks tidak ada lagi di Bootstrap 4 .

Tampilkan / sembunyikan untuk breakpoint dan down :

hidden-xs-down (hidden-xs) = d-none d-sm-block
hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down(n / a 3.x) = d-none(sama dengan hidden)

Tampilkan / sembunyikan untuk breakpoint dan ke atas :

hidden-xs-up= d-none(sama seperti hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up (n / a 3.x) = d-xl-none

Tampilkan / sembunyikan hanya untuk satu breakpoint :

hidden-xs(hanya) = d-none d-sm-block(sama dengan hidden-xs-down)
hidden-sm (hanya) = d-block d-sm-none d-md-block
hidden-md (hanya) = d-block d-md-none d-lg-block
hidden-lg (hanya) = d-block d-lg-none d-xl-block
hidden-xl (n / a 3.x) = d-block d-xl-none
visible-xs (hanya) = d-block d-sm-none
visible-sm (hanya) = d-none d-sm-block d-md-none
visible-md (hanya) = d-none d-md-block d-lg-none
visible-lg (hanya) = d-none d-lg-block d-xl-none
visible-xl (n / a 3.x) = d-none d-xl-block

Demo kelas tampilan responsif di Bootstrap 4

Juga, catatan yang d-*-blockbisa diganti dengan d-*-inline, d-*-flex, d-*-table-cell, d-*-tabledll .. tergantung pada jenis tampilan dari elemen. Baca lebih lanjut di kelas tampilan

— Zim
sumber

1

Saya melihat perubahan ini ketika beta dirilis dan saya pikir ini jauh lebih baik daripada bagaimana itu di rilis alpha. Terima kasih telah menambahkan jawabannya - saya akan tandai sebagai solusinya.

— johna

22

@ Jooh itu lebih buruk - meskipun. Tidak ada d-initialsehingga Anda tidak dapat lagi menimpa d-<breakpoint>-hiddendan mengaturnya ke nilai awal. Jika saya ingin menyembunyikan elemen pada layar yang lebih kecil namun menunjukkannya pada yang sedang dan lebih besar tanpa mengetahui tampilan awal (yang bisa dinamis) maka saya tidak bisa mengembalikan nilainya. Mereka tidak memikirkan semua ini.

— Yates

11

Pembaruan terburuk yang pernah ada. Bagaimana seseorang beralih dari konsep "berbicara" yang sangat intuitif ke sesuatu yang samar? Membuka masalah untuk ini. Setidaknya mereka bisa membiarkan kelas lama hidup berdampingan.

— Andreas

4

Saya sebenarnya terkejut betapa sulitnya menemukan jawaban ini.

— Anthony

2

@Andreas Saya sepenuhnya setuju, ini desain yang buruk menurut saya

— Anthony

35

Sayangnya semua kelas hidden-*-updan hidden-*-downtelah dihapus dari Bootstrap (pada Bootstrap Versi 4 Beta , dalam Versi 4 Alpha dan Versi 3 kelas-kelas ini masih ada).

Alih-alih, kelas baru d-*harus digunakan, seperti yang disebutkan di sini: https://getbootstrap.com/docs/4.0/migration/#utilities

Saya menemukan bahwa pendekatan baru kurang bermanfaat dalam beberapa keadaan. Pendekatan tua adalah untuk HIDE elemen sedangkan pendekatan baru adalah untuk TUNJUKKAN elemen. Menampilkan elemen tidak semudah itu dengan CSS karena Anda perlu tahu apakah elemen ditampilkan sebagai blok, inline, inline-block, tabel, dll.

Anda mungkin ingin mengembalikan gaya "hidden- *" yang dikenal dari Bootstrap 3 dengan CSS ini:

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

Kelas hidden-unless-*- kelas itu tidak termasuk dalam Bootstrap 3, tetapi mereka berguna juga dan harus jelas.

— Klaro
sumber

Apakah ini masih berfungsi dengan versi B4 saat ini? Omong kosong visibilitas ini adalah salah satu alasan utama saya tidak repot-repot bergerak. Kadang-kadang saya menjadi sangat bingung ketika pemrograman dan ini hanya membuat kepala saya masuk (saya 64 jadi beri saya istirahat!) Juga (tidak bermaksud nakal) tetapi apakah Anda memiliki setara untuk terlihat? V berguna untuk memiliki kedua IMHO (atau cara saya kode pula :-)) ATB Steve

— BeNice

24

Bootstrap v4.1 menggunakan nama kelas baru untuk menyembunyikan kolom pada sistem grid mereka.

Untuk menyembunyikan kolom tergantung pada lebar layar, gunakan d-nonekelas atau salah satu d-{sm,md,lg,xl}-nonekelas. Untuk menampilkan kolom pada ukuran layar tertentu, gabungkan kelas d-blockatau d-{sm,md,lg,xl}-blockkelas yang disebutkan di atas .

Contohnya adalah:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Luaskan cuplikan

Lebih banyak di sini .

— sdabruta
sumber

4

Saya tidak berharap bahwa multiple div adalah solusi yang baik.

Saya juga berpikir Anda dapat mengganti .visible-sm-blockdengan .hidden-xs-downdan .hidden-md-up(atau .hidden-sm-downdan .hidden-lg-upuntuk bertindak atas permintaan media yang sama).

hidden-sm-up kompilasi menjadi:

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-downdan .hidden-lg-upmengkompilasi menjadi:

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

Kedua situasi harus bertindak sama.

Situasi Anda menjadi berbeda ketika Anda mencoba untuk mengganti .visible-sm-blockdan .visible-lg-block. Bootstrap v4 docs memberi tahu Anda:

Kelas-kelas ini tidak berusaha untuk mengakomodasi kasus-kasus yang kurang umum di mana visibilitas elemen tidak dapat dinyatakan sebagai satu rentang ukuran breakpoint viewport yang berdekatan; Anda sebagai gantinya harus menggunakan CSS khusus dalam kasus seperti itu.

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}

— Bass Jobsen
sumber

4

Pengguna Klaro menyarankan untuk mengembalikan kelas visibilitas lama, yang merupakan ide bagus. Sayangnya, solusi mereka tidak berhasil di proyek saya.

Saya pikir ini adalah ide yang lebih baik untuk mengembalikan mixin lama bootstrap, karena ini mencakup semua breakpoint yang dapat ditentukan secara individual oleh pengguna.

Ini kodenya:

// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-only{
    @include media-breakpoint-only($bp){
      display:none !important;
    }
  }
}

Dalam kasus saya, saya telah memasukkan bagian ini dalam _custom.scssfile yang disertakan pada titik ini di bootstrap.scss:

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]

— Michael Walter
sumber

1

Sangat membantu! Cara Bootstrap 4 sepertinya sedikit teka-teki, plus itu menambahkan display: blockyang memecah aliran dalam skenario tertentu.

— Lukas

3

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Anda sekarang harus mendefinisikan ukuran apa yang disembunyikan

.hidden-xs-down

Akan menyembunyikan apa pun dari xs dan lebih kecil, hanya xs

.hidden-xs-up

Akan menyembunyikan segalanya

— Kyle Selman
sumber

Ya, saya telah menggunakan ini dalam contoh v4 saya, tetapi masalahnya adalah saya sekarang perlu beberapa DIV di mana di v3 saya bisa lakukan dengan satu ...

— johna

6

Solusi ini kedaluwarsa dan hanya berlaku untuk Bootstrap V4 Alpha, Untuk Beta dan setelahnya, sayangnya ini perlu diganti sebagaimana ditentukan dalam ocmments di atas

— Marc Magon

3

Untuk bootstrap 4, inilah gambar matriks yang menjelaskan kelas yang digunakan untuk menampilkan / menyembunyikan elemen tergantung pada ukuran layar:

Sumber: Meduim: Bootstrap 4 Tersembunyi & Terlihat

— Faouzi
sumber

Bagan ini sangat membantu

— Csaba Toth

Berikut ini tautan langsung dari artikel Menengah tentang Codeply: codeply.com/embed/…

— Csaba Toth

1

Bootstrap 4 untuk menyembunyikan seluruh konten menggunakan kelas ini '.d-tidak ada' itu akan menyembunyikan segalanya terlepas dari breakpoints sama seperti kelas versi bootstrap sebelumnya '.hidden'

— Lasantha
sumber

0

Sayangnya kelas bootstrap 4 baru ini tidak berfungsi seperti yang lama pada div menggunakan collapsekarena mereka mengatur div blockyang terlihat mulai terlihat daripada tersembunyi dan jika Anda menambahkan div tambahan di sekitar collapsefungsi tidak lagi berfungsi.

— Scotty G
sumber

0

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>

— Creak Meng
sumber

Hilang terlihat - ** dan disembunyikan - ** di Bootstrap v4

Hilang terlihat - dan disembunyikan - di Bootstrap v4