Подтвердить что ты не робот

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

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

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

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

Здесь пример в v3...

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

Теперь, когда v4 покончил с этими классами и заменил их на классы visible/hidden - ** - up/down, я, похоже, должен сделать то же самое с несколькими 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>

Есть ли лучший способ сделать это в версии 4, которую я пропустил?

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Помните, что extra-small/mobile (ранее xs) является точкой прерывания по умолчанию (подразумеваемой), если она не переопределена большей точкой останова. Поэтому инфикс -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 (нет 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 и т.д. в зависимости от типа отображения элемента. Читайте больше на классах показа

Ответ 2

К сожалению, все классы hidden-*-up и hidden-*-down были удалены из Bootstrap (начиная с бета- версии Bootstrap версии 4, в версии 4 Alpha и версии 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, но они также полезны и должны быть понятны.

Ответ 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>

Ответ 4

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

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

Ответ 5

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

Теперь вам нужно определить размер скрытого объекта

.hidden-xs-down

Будет скрывать что угодно от xs и меньше, только xs

.hidden-xs-up

Спрячет все

Ответ 6

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

Ответ 7

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

Ответ 8

Я вытащил это с сайта Bootstrap.

Источник

enter image description here

Ответ 9

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