소형 장치의 Twitter 부트 스트랩 숨기기 요소

Question 1

이 코드가 있습니다.

<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 개의 블록. 너비가 같고 col-sm-3모두 설정 nav했으며 여분의 작은 장치 에서 마지막 항목을 숨기고 싶습니다 . 내가 사용 해봤 hidden-xs그에 nav와 그것을 숨기고,하지만 같은 시간에 나는 다른 블록 (에서 변경 클래스를 확장하려는 col-sm-3에 col-sm-4) col-sm-4 X 3 = 12.

어떤 해결책이 있습니까?

Question 2

소형 기기 : 4 columns x 3 (= 12) ==> col-sm-3

초소형 : 3 columns x 4 (= 12) ==> col-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>

말했듯이 hidden-xs로는 충분하지 않으므로 xs와 sm 클래스를 결합해야합니다.

다음은 사용 가능한 반응 형 클래스 와 그리드 시스템 에 대한 공식 문서에 대한 링크 입니다.

머리에 :

1 행 = 12 열
를 들어 X TRA의 S의 쇼핑몰 장치 : COL-XS -__
들어 SM 모든 장치 : COL-SM -__
들면 M 전자 D의 IUM 장치 : COL-MD -__
용 L AR G의 전자 장치 : COL-LG -__
확인 만 볼 (기타에 숨겨진) : 볼-MD (중간에있는 [없는 LG XS 또는 SM에서] 바로 볼 수 있음)
확인 에만 숨겨진 (기타에 표시) : 숨겨진-XS (단지 XtraSmall에 숨겨진)

Question 3

부트 스트랩 4

디스플레이 (숨김 / 표시) 클래스 온 숨기려면 부트 스트랩 4에 변경 xs뷰포트의 사용 :

d-none d-sm-block

참조 : Bootstrap v4에서 visible-** 및 hidden-** 누락

부트 스트랩 3 (원래 답변)

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

http://bootply.com/90722

Question 4

Bootstrap 4.0의 경우 변경 사항이 있습니다.

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

모바일에서 콘텐츠를 숨기고 더 큰 장치에 표시하려면 다음 클래스를 사용해야합니다.

d-none d-sm-block

첫 번째 클래스 세트는 모든 장치에 대해 표시하지 않고 두 번째 클래스 세트는 장치 "sm"에 대해 표시합니다 (다른 장치에 표시하려는 경우 sm 대신 md, lg 등을 사용할 수 있습니다.

마이그레이션 전에 이에 대해 읽어 보는 것이 좋습니다.

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

Question 5

<div class="small hidden-xs">
    Some Content Here
</div>

이는 그리드 / 작은 기둥에서 반드시 사용되지 않는 요소에도 적용됩니다. 큰 화면에서 렌더링 될 때 글꼴 크기는 기본 텍스트 글꼴 크기보다 작아집니다.

이 답변은 OP 제목의 질문을 충족합니다 (이 Q / A를 찾은 방법).