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

Question

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

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

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

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

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

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

Вот подобный пример в v4 ...

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

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

От ...

<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, что я упускать из виду?

Answer 1

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

hidden-* и visible-* классы больше не существует в Bootstrap 4. Если вы хотите, чтобы скрыть элемент на определенных уровнях или контрольных точек в Bootstrap 4, использование классы отображения d-* соответственно. Помните, что xs - это контрольная точка по умолчанию (подразумеваемая), если только она не переопределена больше точка останова.

• hidden-xs-down = d-none d-sm-block
• hidden-sm-down = d-none d-md-block
• hidden-md-down = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down = 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 = 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 (только) = 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 (only) = d-none d-lg-block d-xl-none
• visible-xl (только) = d-none d-xl-block

Demo of this responsive display classes in Bootstrap 4

Кроме того, заметим, чтоd-*-block может быть заменен d-*-inline, d-*-flex, d-*-table-cell, d-*-table и т.д .. висимость ding по типу дисплея элемента. Подробнее о display classes

Answer 2

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

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

.hidden-xs-down 

скроет anythinging от хза и меньше, только хз

.hidden-xs-up 

скроет все

Answer 3

Я не ожидаю, что несколько div's i это хорошее решение.

Я также думаю, что вы можете заменить .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; 
    } 
} 

Answer 4

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

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

я узнал, что новый подход менее полезен при некоторых обстоятельствах. Старый подход был HIDE элементов, а новый подход к SHOW элементов. Показывать элементы не так просто с 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, но они также полезны и должны быть понятны.

Answer 5

Пользователь 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"; 
[..] 

Answer 6

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