Twitter bootstrap ซ่อนองค์ประกอบบนอุปกรณ์ขนาดเล็ก

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>

สี่ช่วงตึกที่มีข้อความอยู่ข้างใน พวกมันมีความกว้างเท่ากันฉันตั้งค่าcol-sm-3เป็นทั้งหมดและสิ่งที่ฉันต้องการทำคือซ่อนสิ่งสุดท้ายnavบนอุปกรณ์ขนาดเล็กพิเศษ ฉันได้พยายามที่จะใช้hidden-xsในที่navและมันจะซ่อนมัน แต่ในเวลาเดียวกันผมต้องการบล็อกอื่น ๆ เพื่อขยาย (ชั้นเปลี่ยนจากcol-sm-3ไป)col-sm-4col-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 cols
สำหรับอุปกรณ์X tra S mall : col-xs -__
สำหรับอุปกรณ์SMทั้งหมด : col-sm -__
สำหรับอุปกรณ์M e D ium : col-md -__
สำหรับL ar G e Device : col-lg -__
ทำให้มองเห็นได้เท่านั้น (ซ่อนอยู่บนอื่น ๆ ): visible-md (มองเห็นได้เฉพาะในสื่อ [ไม่ใช่ใน lg xs หรือ sm])
ทำให้ซ่อนเท่านั้น (มองเห็นได้บนอื่น ๆ ): hidden-xs (ซ่อนไว้ใน XtraSmall)

Question 3

Bootstrap 4

คลาสการแสดงผล (ซ่อน / มองเห็นได้)มีการเปลี่ยนแปลงใน Bootstrap 4 ในการซ่อนบนxsวิวพอร์ตให้ใช้:

d-none d-sm-block

ดูเพิ่มเติม: หายไป - ** และซ่อน - ** ใน Bootstrap v4

Bootstrap 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" ขึ้น (คุณสามารถใช้ md, lg ฯลฯ แทน sm หากคุณต้องการแสดงบนอุปกรณ์อื่น

ฉันขอแนะนำให้อ่านก่อนที่จะย้ายข้อมูล:

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

Question 5

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

นอกจากนี้ยังใช้ได้กับองค์ประกอบที่ไม่จำเป็นต้องใช้ในตาราง / คอลัมน์ขนาดเล็ก เมื่อแสดงบนหน้าจอขนาดใหญ่ขนาดฟอนต์จะเล็กกว่าขนาดฟอนต์ข้อความเริ่มต้นของคุณ

คำตอบนี้ตรงกับคำถามในหัวข้อ OP (ซึ่งเป็นวิธีที่ฉันพบ Q / A นี้)