트위터 부트스트랩에 작은 디바이스에는 숨기십시오 요소점

나는 이 코드:

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

어떤 해결?

Zim
편집된 질문5일 4월 2018 в 12:03
프로그래밍
html css twitter-bootstrap-3 responsive-design twitter-bootstrap
29일 10월 2013 в 1:34
9 파운드
해결책

작은 장치: '4 단으로 x 3 (= 12) = &gt. sm 3 열 '

의 초소형: '3 단 x 4 = &gt (= 12). xs 4 열 '

 <footer class="row">

            <ul class="list-unstyled">
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            </ul>


            <ul class="list-unstyled">
            <li>Text 4</li>
            <li>Text 5</li>
            <li>Text 6</li>
            </ul>


            <ul class="list-unstyled">
            <li>Text 7</li>
            <li>Text 8</li>
            <li>Text 9</li>
            </ul>


            <ul class="list-unstyled">
            <li>Text 10</li>
            <li>Text 11</li>
            <li>Text 12</li>
            </ul>

    </footer>

라고 할 때, 숨겨짐 xs 충분하지 않으며, 합칩니다 xs 및 sm 구분된다.

  • 여기에 대한 공식 문서 링크를 대해 [support. 응답성의 클래스뿐만] [1] [격자선 시스템] [2].
  • 있는 헤드입니다 :*

1 행일 열 = 12 ~

          • XtraSmal 위한 장치: , &lt col-xs- br/&gt.
          • SMal 위한 장치: , &lt col-sm- br/&gt.
          • MeDiu 위한 장치: , &lt col-md- br/&gt.
          • LarG 위한 장치: , &lt col-lg- br/&gt.
    • Make 가시적입니다 전용) (숨겨짐 다른): 가시적입니다 md * (그냥 볼 수 있는 중간입니다 [없는 lg x 나 sm])
    • Make 숨겨짐 전용) (볼 수 있는 다른): * (그냥 숨겨진 숨겨짐 xs 스트라스몰)

[1]: http://getbootstrap.com/css/ # 응답성의 유틸리티와의 클래스뿐만 [2]: http://getbootstrap.com/css/ # 격자선 옵션

Pimento Web
편집된 답변29일 3월 2016 в 7:47
해설 (3)
  • 부트스트랩에 4*

이 [디스플레이 (숨겨짐 / 가시적입니다) 클래스] (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

&lt hr>;

  • 부트스트랩에 3* (원래 답)

'클래스' 유틸리티에는 숨겨짐 xs 사용합니다.


        <ul class="list-unstyled">
        <li>Text 10</li>
        <li>Text 11</li>
        <li>Text 12</li>
        </ul>

http://bootply.com/90722

Zim
편집된 답변5일 4월 2018 в 12:06
해설 (2)
  • 더 부트스트랩에 4.0 변경하십시오 있습니다 *

문서 참조. https://getbootstrap.com/docs/4.0/utilities/display/

모바일 및 디스플레이 장치를 숨기기 위해 더 큰 대한 내용은 다음 클래스를 사용해야 합니다.

d-none d-sm-block

이 모든 디스플레이 장치에 걸쳐 하나의 디스플레이 장치를 설정할 경우, 두 번째 일등급인데 되니그들 &quot sm"; up (rec.601 사용할 수 있는 미사일방어 (md), lg 등 sm 스케쳐내 표시하십시오 대신 다른 디바이스에.

내가 할 수 있는 제안하세요 검토완료 마이그레이션하기 전에:

https://getbootstrap.com/docs/4.0/migration/ # 응답성의 유틸리티와의

해설 (1)
<div class="small hidden-xs">
    Some Content Here
</div>

또한 반드시 사용할 수 없는 요소가 사용되는 격자선 / 소규모 얻어맞았다. 이 때 될 수 있는 대규모 렌더링됩니다 스크린합니다 font-size 보다 작은 기본 텍스트 font-size.

이 질문에 대한 답을 충족합니다 의 OP 제목 (내가 어떻게 찾을 수 있는 이 Q / A).

해설 (1)