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

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

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

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

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

будет скрывать что-либо от 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. Прихлоп В4 документы говорят вам:

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