Menyembunyikan elemen dalam tata letak responsif?

Melihat melalui bootstrap sepertinya mereka mendukung collapsing item menubar untuk layar yang lebih kecil. Apakah ada yang serupa dengan item lain di halaman?

Sebagai contoh, saya punya nav-pil melayang tepat. Pada layar kecil ini menyebabkan masalah. Saya ingin setidaknya memasukkannya ke dalam dropdown mirip-untuk-menunjukkan-lebih mirip.

Apakah ini mungkin dalam kerangka Bootstrap yang ada?

Kelas terlihat baru ditambahkan ke Bootstrap

Perangkat ekstra kecil Ponsel (<768px)(Class names : .visible-xs-block, hidden-xs)

Tablet perangkat kecil (≥768px)(Class names : .visible-sm-block, hidden-sm)

Desktop perangkat sedang (≥992px)(Class names : .visible-md-block, hidden-md)

Desktop perangkat besar (≥1200px)(Class names : .visible-lg-block, hidden-lg)

Untuk informasi lebih lanjut: http://getbootstrap.com/css/#responsive-utilities

Di bawah ini sudah usang pada v3.2.0

Perangkat ekstra kecil Ponsel (<768px) (Class names : .visible-xs, hidden-xs)

Tablet perangkat kecil (≥768px) (Class names : .visible-sm, hidden-sm)

Desktop perangkat sedang (≥992px) (Class names : .visible-md, hidden-md)

Desktop perangkat besar (≥1200px) (Class names : .visible-lg, hidden-lg)

Bootstrap yang jauh lebih tua

.hidden-phone, .hidden-tablet dll tidak didukung / usang.

MEMPERBARUI:

Di Bootstrap 4 ada 2 jenis kelas:

• Yang hidden-*-upmenyembunyikan elemen saat viewport berada di breakpoint yang diberikan atau lebih luas.
• hidden-*-down yang menyembunyikan elemen ketika viewport berada di breakpoint yang diberikan atau lebih kecil.

Juga, xlviewport baru ditambahkan untuk perangkat yang lebarnya lebih dari 1200px. Untuk informasi lebih lanjut klik di sini .

Jawaban Bootstrap 4 Beta:

d-block d-md-noneuntuk bersembunyi di perangkat menengah, besar dan ekstra besar .

d-none d-md-blockuntuk menyembunyikan pada kecil dan ekstra-kecil perangkat.

Perhatikan bahwa Anda juga dapat inline dengan mengganti d-*-blockdengand-*-inline-block

Jawaban lama: Bootstrap 4 Alpha

• Anda dapat menggunakan kelas .hidden-*-upuntuk bersembunyi pada ukuran yang diberikan dan perangkat yang lebih besar

  .hidden-md-upuntuk bersembunyi di perangkat menengah, besar dan ekstra besar .

• Hal yang sama berlaku .hidden-*-downuntuk bersembunyi pada ukuran yang diberikan dan perangkat yang lebih kecil

  .hidden-md-downuntuk menyembunyikan pada media, kecil dan ekstra-kecil perangkat

• visible- * tidak lagi menjadi opsi dengan bootstrap 4

• Untuk hanya menampilkan pada perangkat menengah , Anda dapat menggabungkan keduanya:

  hidden-sm-down dan hidden-xl-up

Ukuran yang valid adalah:

• xs untuk ponsel dalam mode potret (<34em)
• sm untuk ponsel dalam mode lansekap (≥34em)
• md untuk tablet (≥48em)
• lg untuk desktop (≥62em)
• xl untuk desktop (≥75em)

Ini seperti pada Bootstrap 4, alpha 5 (Januari 2017). Lebih detail di sini: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Pada Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/

Bootstrap 4.x jawaban

hidden-* kelas dihapus dari Bootstrap 4 beta dan seterusnya.

Jika Anda ingin tampil di media dan ke atas, gunakan d-*kelas, misalnya:

<div class="d-none d-md-block">This will show in medium and up</div>

Jika Anda ingin menampilkan hanya dalam ukuran kecil dan di bawah ini gunakan ini:

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

Ukuran layar dan bagan kelas

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

Daripada menggunakan .visible-*kelas eksplisit , Anda membuat elemen terlihat dengan tidak menyembunyikannya pada ukuran layar itu. Anda dapat menggabungkan satu .d-*-nonekelas dengan satu .d-*-blockkelas untuk menunjukkan elemen hanya pada interval ukuran layar tertentu (mis. .d-none.d-md-block.d-xl-none Menunjukkan elemen hanya pada perangkat menengah dan besar).

Dokumentasi

Anda dapat memasukkan sufiks kelas modul ini untuk modul apa saja untuk mengontrol dengan lebih baik di mana ia akan ditampilkan atau disembunyikan.

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop 

http://twitter.github.com/bootstrap/scaffolding.html gulir ke bawah

Saya punya beberapa klarifikasi untuk ditambahkan di sini:

1) Daftar yang ditampilkan (ponsel terlihat, tablet terlihat, dll.) Sudah tidak digunakan lagi di Bootstrap 3. Nilai baru adalah:

• terlihat-xs- *
• terlihat-sm- *
• terlihat-md- *
• terlihat-lg- *
• hidden-xs- *
• hidden-sm- *
• hidden-md- *
• hidden-lg- *

Asterisk diterjemahkan menjadi yang berikut untuk masing-masing (Saya hanya menampilkan visible-xs- * di bawah):

• terlihat-xs-block
• terlihat-xs-inline
• terlihat-xs-inline-block

2) Ketika Anda menggunakan kelas-kelas ini, Anda tidak menambahkan periode di depan (seperti yang diperlihatkan secara membingungkan di bagian dari jawaban di atas).

Sebagai contoh:

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) Anda dapat menggunakan visible- * dan hidden- * (misalnya, terlihat-xs dan hidden-xs) tetapi ini sudah usang dalam Bootstrap 3.2.0.

Untuk detail lebih lanjut dan spesifikasi terbaru, buka di sini dan cari "terlihat": http://getbootstrap.com/css/

Semua hidden-*-up, hidden-*kelas tidak berfungsi untuk saya, jadi saya menambahkan hiddenkelas buatan sendiri sebelumnya visible-*(yang berfungsi untuk versi bootstrap saat ini). Ini sangat berguna jika Anda perlu menampilkan div hanya untuk satu layar, dan bersembunyi untuk semua lainnya.

CSS:

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>

Untuk Bootstrap 4.0 beta (dan saya berasumsi ini akan tetap untuk final) ada perubahan - perlu diketahui bahwa kelas tersembunyi telah dihapus.

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

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

d-none d-sm-block

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

Saya sarankan untuk membaca tentang itu sebelum migrasi:

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

Di boostrap 4.1 (jalankan snippet karena saya menyalin seluruh kode tabel dari dokumentasi Bootstrap):

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

<table class="fixed_headers">
  <thead>
    <tr>
      <th>Screen Size</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hidden on all</td>
      <td><code class="highlighter-rouge">.d-none</code></td>
    </tr>
    <tr>
      <td>Hidden only on xs</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on sm</td>
      <td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on md</td>
      <td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on lg</td>
      <td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on xl</td>
      <td><code class="highlighter-rouge">.d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible on all</td>
      <td><code class="highlighter-rouge">.d-block</code></td>
    </tr>
    <tr>
      <td>Visible only on xs</td>
      <td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
    </tr>
    <tr>
      <td>Visible only on sm</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
    </tr>
    <tr>
      <td>Visible only on md</td>
      <td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
    </tr>
    <tr>
      <td>Visible only on lg</td>
      <td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible only on xl</td>
      <td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
    </tr>
  </tbody>
</table>

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements