[twitter-bootstrap] Bootstrap v4에서 visible-** 및 hidden-** 누락

불행히도 모든 클래스 hidden-*-up와 hidden-*-downBootstrap에서 제거되었습니다 (Bootstrap 버전 4 베타 , 버전 4 Alpha 및 버전 3 에서이 클래스는 여전히 존재했습니다).

https://getbootstrap.com/docs/4.0/migration/#utilities에d-* 언급 된대로 대신 새 클래스를 사용해야합니다.

일부 상황에서는 새로운 접근 방식이 덜 유용하다는 것을 알았습니다. 이전 방식은 요소 를 숨기는 것이 었지만 새로운 방식은 SHOW를하는 것입니다 요소 입니다. 요소가 블록, 인라인, 인라인 블록, 테이블 등으로 표시되는지 알아야하기 때문에 CSS에서는 요소를 표시하는 것이 쉽지 않습니다.

이 CSS를 사용하여 Bootstrap 3에서 알려진 이전 “hidden- *”스타일을 복원 할 수 있습니다.

/*\
 * 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에 포함되어 있지 않지만 유용하며 설명이 필요합니다.

답변

<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>

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

.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;
  }
}

// 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;
    }
  }
}

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

.hidden-xs-down

.hidden-xs-up