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 dalam. Mereka sama lebar, I've set col-sm-3 untuk semua dari mereka dan apa yang saya ingin lakukan adalah untuk menyembunyikan terakhir nav tambahan perangkat kecil. I've mencoba untuk menggunakan tersembunyi-xs itu nav dan menyembunyikan hal itu, tapi di saat yang sama saya ingin blok lain untuk memperluas (perubahan kelas dari col-sm-3 untuk col-sm-4) col-sm-4 X 3 = 12.
Ada solusi?
Pada perangkat kecil : 4 kolom x 3 (= 12) ==> col-sm-3
Pada tambahan kecil : 3 kolom 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, tersembunyi-xs tidak cukup, anda harus menggabungkan xs dan sm kelas.
Berikut ini adalah link resmi doc tentang tersedia responsif kelas dan tentang sistem grid.
Telah di kepala :
- 1 baris = 12 cols
- Untuk XtraSmall perangkat : col-xs-__
- Untuk SMsemua perangkat : col-sm-__
- Untuk MeDium Perangkat: col-md-__
- Untuk LarGe : col-lg - ** -__
- Membuat terlihat hanya (tersembunyi lainnya) : terlihat-md (hanya terlihat di medium [tidak di lg xs atau sm])
- Membuat tersembunyi hanya (terlihat pada lainnya) : tersembunyi-xs (hanya tersembunyi di XtraSmall)
Bootstrap 4
Tampilan (tersembunyi/terlihat) kelas yang berubah di Bootstrap 4. Untuk menyembunyikan pada xs viewport digunakan:
d-tidak ada d-sm-blok
Juga melihat: https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4/45844579#45844579
Bootstrap 3 (jawaban asli)
Gunakan tersembunyi-xs utilitas kelas..
<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>
Untuk Bootstrap 4.0 terdapat perubahan
Lihat docs: https://getbootstrap.com/docs/4.0/utilities/display/
Dalam rangka untuk menyembunyikan konten pada perangkat mobile dan ditampilkan pada perangkat yang lebih besar anda harus menggunakan kelas-kelas berikut:
d-none d-sm-blockKelas pertama mengatur tampilan yang ada di seluruh perangkat dan yang kedua tampilan ini untuk perangkat "sm" sampai (anda bisa menggunakan md, lg, dll. bukan sm jika anda ingin menunjukkan pada perangkat yang berbeda.
Saya sarankan untuk membaca tentang hal itu sebelum migrasi:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
<div class="small hidden-xs">
Some Content Here
</div>Hal ini juga bekerja untuk unsur-unsur yang belum tentu digunakan dalam kotak /kolom kecil. Ketika itu diberikan pada layar yang lebih besar font-size akan lebih kecil dari teks default font-size.
Ini jawaban yang memuaskan atas pertanyaan di OP judul (yang adalah bagaimana saya menemukan ini Q/A).
