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 :
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>
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-block
Kelas 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).