Twitter bootstrap menyembunyikan elemen pada perangkat kecil

Saya memiliki kode ini:

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

Empat blok dengan beberapa teks di dalamnya. Mereka sama lebarnya, saya telah mengatur col-sm-3semuanya dan yang ingin saya lakukan adalah menyembunyikan yang terakhir navpada perangkat ekstra kecil. Saya sudah mencoba untuk digunakan hidden-xspada itu navdan menyembunyikan itu, tapi di saat yang sama saya ingin blok lain untuk memperluas (kelas perubahan dari col-sm-3ke col-sm-4) col-sm-4 X 3 = 12.

Ada solusi?

Di perangkat kecil: 4 columns x 3 (= 12) ==> col-sm-3

Sangat kecil: 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>

Seperti yang Anda katakan, hidden-xs tidak cukup, Anda harus menggabungkan kelas xs dan sm.

Berikut ini tautan ke dokumen resmi tentang kelas responsif yang tersedia dan tentang sistem kisi .

Ada di kepala:

• 1 baris = 12 cols
• Untuk perangkat mal X tra S : col-xs -__
  
• Untuk SM semua perangkat : col-sm -__
  
• Untuk Perangkat M e D ium : col-md -__
  
• Untuk Perangkat L ar G e : col-lg -__
  
• Jadikan hanya terlihat (tersembunyi di sisi lain): visible-md (hanya terlihat di medium [bukan di lg xs atau sm])
• Jadikan tersembunyi saja (terlihat di lain): hidden-xs (hanya disembunyikan di XtraSmall)

Bootstrap 4

Kelas tampilan (tersembunyi / terlihat) diubah di Bootstrap 4. Untuk menyembunyikan xspenggunaan viewport:

d-none d-sm-block

Lihat juga: Terlihat hilang - ** dan tersembunyi - ** di Bootstrap v4

Bootstrap 3 (jawaban asli)

Gunakan hidden-xskelas utilitas ..

<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

Untuk Bootstrap 4.0 ada perubahan

Lihat dokumen: https://getbootstrap.com/docs/4.0/utilities/display/

Untuk menyembunyikan konten di ponsel dan tampilan di perangkat yang lebih besar, Anda harus menggunakan kelas berikut:

d-none d-sm-block

Kumpulan kelas pertama tidak menampilkan semua perangkat dan yang kedua menampilkannya untuk perangkat "sm" ke atas (Anda dapat menggunakan md, lg, dll. Alih-alih sm jika Anda ingin menampilkannya di perangkat yang berbeda.

Saya menyarankan untuk membaca tentang itu sebelum migrasi:

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

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

Ini juga berfungsi untuk elemen yang tidak selalu digunakan dalam kisi / kolom kecil. Saat dirender di layar yang lebih besar, ukuran font akan lebih kecil dari ukuran font teks default Anda.

Jawaban ini memenuhi pertanyaan dalam judul OP (yang merupakan bagaimana saya menemukan Q / A ini).