Brakuje widocznego - ** i ukrytego - ** w Bootstrap v4

W Bootstrap v3 często używam klas ukrytych - ** w połączeniu z clearfixem, aby kontrolować układy wielu kolumn na różnych szerokościach ekranu. Na przykład,

Mógłbym połączyć wiele ukrytych - ** w jednym DIV, aby moje kolumny były wyświetlane poprawnie przy różnych szerokościach ekranu.

Jako przykład chciałbym wyświetlić rzędy zdjęć produktów, 4 w rzędzie na większych ekranach, 3 na mniejszych ekranach, a następnie 2 na bardzo małych ekranach. Zdjęcia produktów mogą mieć różne wysokości, dlatego potrzebuję poprawki, aby zapewnić prawidłowe łamanie wiersza.

Oto przykład w v3 ...

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

Teraz, gdy v4 porzuciło te klasy i zastąpiło je klasami widocznymi / ukrytymi - ** - w górę / w dół, wydaje mi się, że muszę zrobić to samo z wieloma DIV.

Oto podobny przykład w v4 ...

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

Więc przeszedłem z pojedynczych DIV do konieczności dodawania wielu DIV z mnóstwem klas góra / dół, aby osiągnąć to samo.

Z...

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

do...

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

Czy istnieje lepszy sposób na zrobienie tego w v4, które przeoczyłem?

Aktualizacja dla Bootstrap 4 (2018)

Te hidden-*i visible-*zajęcia przestały istnieć w Bootstrap 4. Jeśli chcesz ukryć element o konkretnych warstw lub pułapki w Bootstrap 4, należy użyć d-* klasy wyświetlania odpowiednio.

Pamiętaj, że bardzo mały / mobilny (dawniej xs) jest domyślnym (domyślnym) punktem przerwania, chyba że zostanie zastąpiony większym punktem przerwania. Dlatego infix już nie istnieje w Bootstrap 4 .-xs

Pokaż / ukryj dla punktu przerwania i w dół :

• 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(nie dotyczy 3.x) = d-none(to samo co hidden)

Pokaż / ukryj dla punktu przerwania i do góry :

• hidden-xs-up= d-none(to samo co hidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up (nie dotyczy 3.x) = d-xl-none

Pokaż / ukryj tylko dla jednego punktu przerwania :

• hidden-xs(tylko) = d-none d-sm-block(to samo co hidden-xs-down)
• hidden-sm (tylko) = d-block d-sm-none d-md-block
• hidden-md (tylko) = d-block d-md-none d-lg-block
• hidden-lg (tylko) = d-block d-lg-none d-xl-block
• hidden-xl (nie dotyczy 3.x) = d-block d-xl-none
• visible-xs (tylko) = d-block d-sm-none
• visible-sm (tylko) = d-none d-sm-block d-md-none
• visible-md (tylko) = d-none d-md-block d-lg-none
• visible-lg (tylko) = d-none d-lg-block d-xl-none
• visible-xl (nie dotyczy 3.x) = d-none d-xl-block

Demo responsywnych klas wyświetlania w Bootstrap 4

Również pamiętać, że d-*-blockmożna zastąpić d-*-inline, d-*-flex, d-*-table-cell, d-*-tableitd .. w zależności od rodzaju wyświetlanego elementu. Przeczytaj więcej o klasach wyświetlania

Niestety wszystkie klasy hidden-*-upi hidden-*-downwyjęto z Bootstrap (stan Bootstrap wersji 4 beta , w wersji 4 Alpha i wersja 3 klasy te nadal istnieją).

Zamiast tego d-*należy użyć nowych klas , jak wspomniano tutaj: https://getbootstrap.com/docs/4.0/migration/#utilities

Dowiedziałem się, że w niektórych okolicznościach nowe podejście jest mniej przydatne. Stare podejście polegało na UKRYWANIU elementów, a nowe podejście POKAŻ elementy. Wyświetlanie elementów nie jest tak łatwe w CSS, ponieważ musisz wiedzieć, czy element jest wyświetlany jako blok, wstawka, wstawka, tabela itp.

Możesz przywrócić poprzednie style „ukryte- *” znane z Bootstrap 3 za pomocą tego CSS:

/*\
 * 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;
    } 
}

Klasy hidden-unless-*nie zostały uwzględnione w Bootstrap 3, ale są również przydatne i powinny być zrozumiałe.

Bootstrap v4.1 używa nowych nazw klas do ukrywania kolumn w systemie siatki.

Aby ukryć kolumny w zależności od szerokości ekranu, użyj d-noneklasy lub dowolnej z d-{sm,md,lg,xl}-noneklas. Aby wyświetlić kolumny na niektórych rozmiarach ekranu, połącz wyżej wymienione klasy z d-blocklub d-{sm,md,lg,xl}-blockklasami.

Przykładami są:

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

Więcej ich tutaj .

Nie oczekuję, że wielokrotne div jest dobrym rozwiązaniem.

Myślę też można zastąpić .visible-sm-blockz .hidden-xs-downi .hidden-md-up(lub .hidden-sm-downi.hidden-lg-up działać na tych samych zapytań mediów).

hidden-sm-up kompiluje się w:

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

.hidden-sm-downi .hidden-lg-upkompiluje się w:

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

Obie sytuacje powinny działać tak samo.

Sytuacja staje się inna, gdy próbujesz zastąpić .visible-sm-blocki .visible-lg-block. Dokumenty Bootstrap v4 mówią:

Klasy te nie próbują uwzględnić mniej powszechnych przypadków, w których widoczność elementu nie może być wyrażona jako pojedynczy ciągły zakres rozmiarów punktów przerwania rzutni; w takich przypadkach będziesz musiał użyć niestandardowego CSS.

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

Użytkownik Klaro zasugerował przywrócenie starych klas widoczności, co jest dobrym pomysłem. Niestety ich rozwiązanie nie zadziałało w moim projekcie.

Myślę, że lepszym pomysłem jest przywrócenie starej mieszanki bootstrap, ponieważ obejmuje ona wszystkie punkty przerwania, które użytkownik może indywidualnie zdefiniować.

Oto kod:

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

W moim przypadku wstawiłem tę część do _custom.scsspliku, który znajduje się w tym miejscu w 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/

Teraz musisz zdefiniować rozmiar tego, co jest ukryte

.hidden-xs-down

Ukryje wszystko przed xs i mniejszymi, tylko xs

.hidden-xs-up

Ukryje wszystko

W przypadku bootstrap 4, oto obraz macierzy wyjaśniający klasy używane do pokazywania / ukrywania elementów zależy od wielkości ekranu:

Źródło: Meduim: Bootstrap 4 Ukryty i widoczny

Bootstrap 4, aby ukryć całą zawartość, użyj tej klasy „.d-none” , ukryje wszystko bez względu na punkty przerwania takie same jak poprzednia klasa wersji bootstrap „.hidden”

Niestety te nowe klasy bootstrap 4 nie działają tak jak stare na div przy użyciu, collapseponieważ ustawiają widoczny div, dla blockktórego zaczyna się widoczny, a nie ukryty, a jeśli dodasz dodatkowy div wokół collapsefunkcjonalności, przestanie on działać.

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>