나는 이 코드:
<footer class="row">
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
</nav>
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>
</ul>
</nav>
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
</ul>
</nav>
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 10</li>
<li>Text 11</li>
<li>Text 12</li>
</ul>
</nav>
</footer>
일부 문헌에 몸에요 4 블록 이들은 자가 너버 I& # 39, ve sm 3 열 모두야 및 세트 ',' 을 하고 싶은 일을 하는 마지막 'nav' 에 숨김니다 초소형 디바이스입니다. # 39, ve i& 사용할 수 있는 'nav' 와 '한' 숨겨짐 xs 아니지만, 같은 시간 다른 블록 i want it 감춰집니다 확장하십시오 (클래스 변경 '을' 에서 'sm 3 열 sm 4 열') 'sm 4 열 x 3 = 12'.
어떤 해결?
작은 장치: '4 단으로 x 3 (= 12) = >. sm 3 열 '
의 초소형: '3 단 x 4 = > (= 12). xs 4 열 '
<footer class="row">
<nav class="col-xs-4 col-sm-3">
<ul class="list-unstyled">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
</nav>
<nav class="col-xs-4 col-sm-3">
<ul class="list-unstyled">
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>
</ul>
</nav>
<nav class="col-xs-4 col-sm-3">
<ul class="list-unstyled">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
</ul>
</nav>
<nav class="hidden-xs col-sm-3">
<ul class="list-unstyled">
<li>Text 10</li>
<li>Text 11</li>
<li>Text 12</li>
</ul>
</nav>
</footer>
라고 할 때, 숨겨짐 xs 충분하지 않으며, 합칩니다 xs 및 sm 구분된다.
1 행일 열 = 12 ~
[1]: http://getbootstrap.com/css/ # 응답성의 유틸리티와의 클래스뿐만 [2]: http://getbootstrap.com/css/ # 격자선 옵션
이 [디스플레이 (숨겨짐 / 가시적입니다) 클래스] (https://getbootstrap.com/docs/4.0/utilities/display/) 가 4 부트스트랩에 바뀌었다. 숨길 수 있는 'x' 뷰포트가 사용:
'd 없음 sm d 블록'
참조: # 45844579 https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4/45844579
< hr>;
'클래스' 유틸리티에는 숨겨짐 xs 사용합니다.
<nav class="col-sm-3 hidden-xs">
<ul class="list-unstyled">
<li>Text 10</li>
<li>Text 11</li>
<li>Text 12</li>
</ul>
</nav>
문서 참조. https://getbootstrap.com/docs/4.0/utilities/display/
모바일 및 디스플레이 장치를 숨기기 위해 더 큰 대한 내용은 다음 클래스를 사용해야 합니다.
d-none d-sm-block
이 모든 디스플레이 장치에 걸쳐 하나의 디스플레이 장치를 설정할 경우, 두 번째 일등급인데 되니그들 " sm"; up (rec.601 사용할 수 있는 미사일방어 (md), lg 등 sm 스케쳐내 표시하십시오 대신 다른 디바이스에.
내가 할 수 있는 제안하세요 검토완료 마이그레이션하기 전에:
https://getbootstrap.com/docs/4.0/migration/ # 응답성의 유틸리티와의