У Bootstrap v4 відсутнє видиме - ** та приховане - **

У Bootstrap v3 я часто використовую приховані - ** класи в поєднанні з clearfix для управління макетами декількох стовпців при різній ширині екрана. Наприклад,

Я міг би поєднати кілька прихованих - ** в одному DIV, щоб мої мульти стовпці відображалися правильно на різних ширинах екрана.

Як приклад, якщо я хотів відображати рядки фотографій продуктів, 4 у рядку на великих розмірах екрана, 3 на менших екранах, а потім 2 на дуже маленьких екранах. Фотографії виробу можуть бути різної висоти, тому мені потрібне виправлення, щоб забезпечити належне розрив рядків.

Ось приклад в v3 ...

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

Тепер, коли v4 покінчив з цими класами, і замінив їх видимими / прихованими - ** - класами вгору / вниз, я, мабуть, повинен робити те ж саме з декількома DIVs замість цього.

Ось подібний приклад в v4 ...

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

Тому я перейшов від одиночних DIV до необхідності додавання декількох DIV з великою кількістю класів вгору / вниз, щоб досягти одного і того ж.

З ...

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

до ...

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

Чи є кращий спосіб зробити це в v4, який я не помітив?

Оновлення для Bootstrap 4 (2018)

В hidden-*і visible-*класах більше не існують в Bootstrap 4. Якщо ви хочете , щоб приховати елемент на певних рівнях або контрольних точках в Bootstrap 4, використовують d-* класи відображення відповідно.

Пам’ятайте, що надзвичайно малий / мобільний (раніше xs) - точка замикання за замовчуванням (мається на увазі), за винятком випадків, коли це не перевищує велику точку розриву. Тому немає, інфіксне більше не існує в Bootstrap 4 .-xs

Показати / приховати для точки перерви та вниз :

• 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(те саме, що hidden)

Показати / приховати для точки розриву та вгору :

• hidden-xs-up= d-none(те саме, що 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

Показати / приховати лише для однієї точки розриву :

• hidden-xs(тільки) = d-none d-sm-block(те саме, що hidden-xs-down)
• hidden-sm (тільки) = d-block d-sm-none d-md-block
• hidden-md (тільки) = d-block d-md-none d-lg-block
• hidden-lg (тільки) = d-block d-lg-none d-xl-block
• hidden-xl (n / a 3.x) = d-block d-xl-none
• visible-xs (тільки) = d-block d-sm-none
• visible-sm (тільки) = d-none d-sm-block d-md-none
• visible-md (тільки) = d-none d-md-block d-lg-none
• visible-lg (тільки) = d-none d-lg-block d-xl-none
• visible-xl (n / a 3.x) = d-none d-xl-block

Демонстрація класів чутливих дисплеїв у Bootstrap 4

Крім того , відзначимо , що d-*-blockможе бути замінений d-*-inline, d-*-flex, d-*-table-cell, і d-*-tableт.д .. в залежності від типу відображення елемента. Детальніше читайте на заняттях з дисплея

На жаль , все класи hidden-*-upі hidden-*-downбули видалені з Bootstrap (станом на Bootstrap версії 4 Beta , в версії 4 Альфа і версії 3 ці класи все ще існують).

Натомість d-*слід використовувати нові класи , про що тут говорилося: https://getbootstrap.com/docs/4.0/migration/#utilities

Я з’ясував, що новий підхід за певних обставин менш корисний. Старий підхід полягав у HIDE- елементах, а новий - SHOW елементів. Показати елементи не так просто з CSS, оскільки вам потрібно знати, чи елемент відображається як блок, вбудований, вбудований блок, таблиця тощо.

Ви можете відновити колишні стилі "приховані - *", відомі з Bootstrap 3 за допомогою цього 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;
    } 
}

Заняття hidden-unless-*не були включені до Bootstrap 3, але вони також є корисними і повинні бути самостійними.

Bootstrap v4.1 використовує нові імена класів для приховування стовпців на їх сітці.

Для приховування стовпців залежно від ширини екрана використовуйте d-noneклас або будь-який із d-{sm,md,lg,xl}-noneкласів. Щоб відобразити стовпці певних розмірів екрана, комбінуйте вищезгадані класи з d-blockабоd-{sm,md,lg,xl}-block класами класами.

Приклади:

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

Більше таких тут .

Я не сподіваюся, що кілька дівок є хорошим рішенням.

Я також думаю, що ви можете замінити .visible-sm-blockна .hidden-xs-downі .hidden-md-up(або .hidden-sm-downі.hidden-lg-up діяти на ті ж запити ЗМІ).

hidden-sm-up компілюється в:

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

.hidden-sm-downі .hidden-lg-upзбирається в:

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

Обидві ситуації повинні діяти однаково.

У вас ситуація стає іншою, коли ви намагаєтесь замінити .visible-sm-blockі .visible-lg-block. Документи Bootstrap v4 говорять вам:

Ці класи не намагаються вмістити менш поширені випадки, коли видимість елемента не може бути виражена як єдиний суміжний діапазон розмірів точки перелому огляду; замість цього вам потрібно буде використовувати користувацький 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;
  }
}

Користувач Klaro запропонував відновити старі класи видимості, що є хорошою ідеєю. На жаль, їхнє рішення не спрацювало в моєму проекті.

Я думаю, що краща ідея відновити старий міксин завантажувальної програми, оскільки вона охоплює всі точки прориву, які можна індивідуально визначити користувачем.

Ось код:

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

У моєму випадку я вставив цю частину у _custom.scssфайл, який у цей момент включений у 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/

Тепер ви повинні визначити розмір того, що приховується, як так

.hidden-xs-down

Сховатиме що-небудь від xs та менших, лише xs

.hidden-xs-up

Приховає все

Для завантажувальної програми 4 ось матричне зображення, що пояснює класи, які використовуються для показу / приховування елементів, залежить від розміру екрана:

Джерело: Meduim: Bootstrap 4 Hidden & Visible

Bootstrap 4, щоб приховати весь вміст, використовуйте цей клас '.d-none', він буде приховувати все, незалежно від точок прориву, як у попереднього класу версії завантажувальної версії '.hidden'

На жаль, ці нові класи для завантаження 4 не працюють, як старі в діві, використовуючи, collapseоскільки вони встановлюють видимий div, blockякий починається видимим, а не прихованим, і якщо ви додасте додатковий div, collapseфункціонал більше не працює.

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>