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


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

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

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

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

http://jsbin.com/tosebayode/edit?html, css, выход

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

вот аналогичный пример в v4...

http://jsbin.com/sagowihowa/edit?html, css, выход

таким образом, я перешел от одного DIVs к тому, чтобы добавить несколько DIVs с большим количеством классов up/down для достижения того же самого.

из...

<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, который я пропустил?

7 141

7 ответов:

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

The hidden-* и visible-* классы уже нет в Bootstrap 4. Если вы хотите скрыть элемент на определенных уровнях или останова в Bootstrap 4, Используйте d-*классы дисплей соответственно.

помните, что экстра-маленький / мобильный (ранее xs) является точкой останова по умолчанию (подразумевается), если не переопределено больше точка прерывания. Таким образом, the -xs инфикс больше не существует в Bootstrap 4.

Показать/Скрыть для точка останова и вниз:

  • 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 etc.. в зависимости от типа отображения элемента. Читайте больше на классы дисплей

к сожалению, все классы hidden-*-up и hidden-*-down были удалены из Bootstrap (начиная с версии Bootstrap 4 бета в версии 4 Альфа и вариант 3 эти классы все еще существовали).

вместо этого, новые классы d-* следует использовать, как указано здесь: https://getbootstrap.com/docs/4.0/migration/#utilities

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

вы можете восстановить прежние" скрытые -* " стили, известные из Bootsrap 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>

больше этих здесь.

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

теперь вы должны определить размер того, что скрывается как так

.hidden-xs-down

скроет anythinging от xs и меньше, только xs

.hidden-xs-up

скроет все

Я не ожидаю, что несколько 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 предложил восстановить старые классы видимости, что является хорошей идеей. К сожалению, их решение не работает в моем проекте.

Я думаю, что лучше восстановить старый mixin bootstrap, потому что он охватывает все точки останова, которые могут быть индивидуально определены пользователем.

вот код:

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

к сожалению, эти новые классы bootstrap 4 не работают, как старые на div с помощью collapse как они установили видимый div в block который начинается видимым, а не скрытым, и если вы добавите дополнительный div вокруг collapse функциональность не работает.