Bootstrap v4에서 visible-** 및 hidden-** 누락

Bootstrap v3에서는 종종 clearfix와 결합 된 hidden-** 클래스를 사용하여 다른 화면 너비에서 다중 열 레이아웃을 제어합니다. 예를 들어

하나의 DIV에 여러 개의 숨겨진 **을 결합하여 여러 열이 다른 화면 너비에서 올바르게 표시되도록 할 수 있습니다.

예를 들어 제품 사진의 행을 표시하려면 큰 화면 크기에서 행당 4 개, 작은 화면에서 3 개, 매우 작은 화면에서 2 개를 표시합니다. 제품 사진의 높이가 다를 수 있으므로 행이 올바르게 끊어 지도록 수정해야합니다.

다음은 v3의 예입니다.

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

이제 v4는 이러한 클래스를 없애고 보이는 / 숨겨진 ** 업 / 다운 클래스로 대체했습니다. 대신 여러 DIV로 동일한 작업을 수행해야합니다.

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>

내가 간과 한 v4 에서이 작업을 수행하는 더 좋은 방법이 있습니까?

Bootstrap 4 업데이트 (2018)

hidden-*와 visible-*클래스는 더 이상 존재하지 않는 당신이, 부트 스트랩 4 특정 계층 또는 중단 점에 요소를 숨기 사용하려면 부트 스트랩 4에 d-* 표시 클래스를 따라.

큰 중단 점으로 xs재정의되지 않는 한 초소형 / 모바일 (이전의 )은 기본 (암시 적) 중단 점입니다. 따라서, 중위는 더 이상 부트 스트랩 4에 존재하지 않는다 .-xs

중단 점 표시 및 숨기기 :

• 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 (없음 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소자의 표시 형식에 따라 등. 디스플레이 클래스 에 대해 자세히 알아보십시오

불행히도 모든 클래스 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에 포함되어 있지 않지만 유용하며 설명이 필요합니다.

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>

여기에 더 많은 것들이 있습니다 .

여러 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. 부트 스트랩 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는 이전 가시성 클래스를 복원 할 것을 제안했습니다. 이는 좋은 생각입니다. 불행히도, 그들의 솔루션은 내 프로젝트에서 작동하지 않았습니다.

부트 스트랩의 이전 믹스 인을 복원하는 것이 좋습니다. 사용자가 개별적으로 정의 할 수있는 모든 중단 점을 포함하고 있기 때문입니다.

코드는 다음과 같습니다.

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

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

이제 숨겨지는 것의 크기를 정의해야합니다.

.hidden-xs-down

xs 이하의 모든 것을 숨기고 xs 만

.hidden-xs-up

모든 것을 숨길 것입니다

부트 스트랩 4의 경우 화면 크기에 따라 요소를 표시하거나 숨기는 데 사용되는 클래스를 설명하는 매트릭스 이미지가 있습니다.

출처 : Meduim : Bootstrap 4 Hidden & Visible

전체 내용을 숨기려면 Bootstrap 4 가이 클래스 '.d-none'을 사용 하십시오. 이전 부트 스트랩 버전 클래스 '.hidden' 과 같은 중단 점에 관계없이 모든 것을 숨 깁니다.

불행히도이 새로운 부트 스트랩 4 클래스는 collapse보이는 div를 block숨기지 않고 보이기 시작 하도록 설정 하고 collapse기능 주위에 여분의 div를 추가하면 더 이상 작동하지 않으므로 div 의 이전 클래스와 같이 작동하지 않습니다.

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>