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

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

---

이 코드가 있습니다.

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

어떤 해결책이 있습니까?

---

소형 기기 : 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 -__
  
• For SMall device : col-sm-__
  
• For MeDium Device: col-md-__
  
• For LarGe Device : col-lg-__
  
• Make visible only (hidden on other) : visible-md (just visible in medium [not in lg xs or sm])
• Make hidden only (visible on other) : hidden-xs (just hidden in XtraSmall)

---

Bootstrap 4

The display (hidden/visible) classes are changed in Bootstrap 4. To hide on the xs viewport use:

d-none d-sm-block

Also see: Missing visible-** and hidden-** in Bootstrap v4

---

Bootstrap 3 (original answer)

Use the hidden-xs utility class..

<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

---

For Bootstrap 4.0 there is a change

See the docs: https://getbootstrap.com/docs/4.0/utilities/display/

In order to hide the content on mobile and display on the bigger devices you have to use the following classes:

d-none d-sm-block

The first class set display none all across devices and the second one display it for devices "sm" up (you could use md, lg, etc. instead of sm if you want to show on different devices.

I suggest to read about that before migration:

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

---

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

This also works for elements not necessarily used in a grid /small column. When it is rendered on larger screens the font-size will be smaller than your default text font-size.

This answer satisfies the question in the OP title (which is how I found this Q/A).

참고URL : https://stackoverflow.com/questions/19659726/twitter-bootstrap-hide-element-on-small-devices