Отсутствует видимый - ** и скрытый - ** в Bootstrap v4

В Bootstrap v3 я часто использую скрытые классы - ** в сочетании с clearfix для управления многостолбцовой разметкой на разной ширине экрана. Например,

Я мог бы объединить несколько скрытых - ** в одном DIV, чтобы мои мультиколонки правильно отображались на экранах различной ширины.

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

Вот пример в v3 ...

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

Теперь, когда v4 покончил с этими классами и заменил их видимыми / скрытыми - ** - классами вверх / вниз, мне кажется, что вместо этого я должен сделать то же самое с несколькими DIV.

Вот похожий пример в 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-* классы отображения соответственно.

Помните, что extra-small / mobile (ранее 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(нет 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 (нет 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 (нет 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 (нет 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

Я обнаружил, что новый подход менее полезен при некоторых обстоятельствах. Старый подход состоял в том, чтобы скрыть элементы, в то время как новый подход - показать элементы. Отображать элементы не так просто с CSS, так как вам нужно знать, отображается ли элемент как блок, встроенный блок, встроенный блок, таблица и т. Д.

Возможно, вы захотите восстановить прежние стили "hidden- *", известные из 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-noneclass или любой из 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>

Больше из них здесь .

Я не ожидаю, что несколько 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

Скроет что-нибудь от хз и меньше, только хз

.hidden-xs-up

Скроет все

Для начальной загрузки 4 вот матричное изображение, объясняющее, какие классы используются для отображения / скрытия элементов, зависит от размера экрана:

Источник: Meduim: Bootstrap 4 Hidden & Visible

Bootstrap 4, чтобы скрыть весь контент, используйте этот класс «.d-none», он будет скрывать все, независимо от точек останова, таких же, как предыдущий класс версии начальной загрузки «.hidden».

К сожалению, эти новые классы начальной загрузки 4 не работают так же, как старые классы div, используя их, 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>