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

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?

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

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.

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>

Lebih banyak di sini .

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

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";
[..]

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

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

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'

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.

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>