Menyembunyikan elemen dalam tata letak responsif?

298

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?

Kaitlyn2004
sumber

Jawaban:

649

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 .

Marc Uberstein
sumber
2
Saya tidak percaya .hidden-phonedan .hidden-tabletsudah usang ** - mereka ** tidak didukung . Sudah usang cenderung berarti "telah digantikan oleh pendekatan lain meskipun masih didukung dimaksudkan untuk segera dihapus" . Ini tampaknya menjadi kasus dengan Bootstrap 3.2.0 - .visible-xsdan sejenisnya masih berfungsi untuk saat ini, sementara .hidden-phonedan teman-teman sama sekali tidak ada dalam fungsionalitas Bootstrap.
Slipp D. Thompson
2
Terima kasih - Saya telah memperbarui jawaban untuk kata-kata yang benar. Seharusnya lebih jelas bagi pengguna lain sekarang.
Marc Uberstein
2
FYI Melakukan sedikit riset lebih lanjut— sepertinya “usang” umumnya digunakan dalam konteks formal karena keadaan ketidakberdukung mengikuti penghinaan. Saya pikir "tidak didukung" bekerja dengan baik, tetapi apa pun. Terima kasih telah mempertimbangkan saran saya sebelumnya.
Slipp D. Thompson
1
:) Saya telah menambahkan keduanya ... demi persyaratan awam. Terima kasih telah melakukan sedikit penelitian lebih lanjut tentang kata-kata yang benar, pasti akan mengingatnya untuk posting selanjutnya. sorak-sorai
Marc Uberstein
2
Perhatikan bahwa pembaruan Bootstrap 4 untuk bootstrap 4 alpha. Dalam versi rilis Anda harus menggunakan kelas .d- -none dan d- -block. getbootstrap.com/docs/4.0/migration/#responsive-utilities
Pieter De Bie
138

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.

masukkan deskripsi gambar di sini

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/

Julien
sumber
8
Ini telah dihapus dari v4 beta. Anda sekarang menggunakan .d-kelas untuk menyembunyikan atau menunjukkan ukuran yang berbeda getbootstrap.com/docs/4.0/utilities/display
DriverDan
1
Saya melihat, tetapi saya masih mencoba untuk menyelesaikan ini .... Bagaimana saya menyembunyikan sesuatu di layar kecil sekarang? Saya perlu kebalikan dari d-md-none, karena saya beralih ke div tergantung pada layar besar vs kecil.
Leo Muller
@ LeoMuller Jika Anda ingin elemen bersembunyi di ukuran sm dan di bawah, tetapi terlihat pada md, lg dan xl, gunakan d-none d-md-block. code.luasoftware.com/tutorials/bootstrap/…
Desmond Lua
@DesmondLua Saya pikir sama dengan LeoMuller ... di BS4 beberapa elemen berperilaku sebagai blok dan beberapa lainnya sebagai fleksibel ... ¿mengapa saya harus tahu sebelumnya tentang sifat BS4 dari sebuah elemen hanya jika saya ingin menyembunyikannya di telepon tapi saya ingin menampilkannya sebagai standar BS4 di tablet dan laptop? Ini bertentangan dengan apa yang biasanya Anda pikirkan ... Saya harap Tim BS4 memperbaikinya sebelum rilis final
JavierFuentes
Saya tidak dapat menemukan dokumentasi pada d-block pada dokumentasi Bootstrap 4 saat ini, apakah mereka menghapus ini?
Mojimi
32

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

kiranvj
sumber
23

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

john taylor
sumber
Terima kasih - Saya benar-benar DO ingin mereka terlihat ... hanya dalam bentuk kental / runtuh seperti navbar-collapse yang khusus untuk navbar dan saya tidak melihat dukungan lain untuk elemen lain ...
Kaitlyn2004
Mereka dapat diciutkan berdasarkan nama dan / atau id kelas mereka. Jika Anda menemukan CSS / JS maka Anda dapat menambahkan kelas / id tambahan yang melakukan hal yang sama.
justinavery
Apakah ada peluang Anda bisa memberikan contoh? Saya melihat plugin runtuh, tetapi tidak yakin tentang implementasi. setidaknya dalam navbar tampaknya ditangani dengan sangat otomatis - atau setidaknya dibangun ke dalam inti bootstrap
Kaitlyn2004
7
Dihentikan sejak Bootstrap 3.
Gereltod
1
Mohon informasikan bahwa ini hanya untuk #Bootstrap 2
Lucas Bustamante
19

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/

Jazimov
sumber
Salah hidden-xs-blocktidak valid, tetapi visible-xs-blockadalah
Hammad Khan
@ hmd: Dapatkah Anda memberikan sumber / kutipan untuk komentar Anda, yang saya bahkan tidak sepenuhnya mengerti karena itu bahkan bukan kalimat penuh. Apa sebenarnya yang ingin Anda bagikan? Apakah Anda mengatakan bahwa hanya hidden-xs-block yang tidak valid atau Anda mengatakan hidden-xs- * tidak valid? Apakah Anda mengatakan bahwa hidden-md-block valid sementara hidden-xs-block tidak? Tolong jelaskan terutama karena tampaknya Anda menurunkan komentar saya ketika saya sebenarnya telah menyalin kata-kata langsung dari dokumentasi online bootstrap. Untuk versi bootstrap apa yang Anda rujuk dalam komentar Anda?
Jazimov
2
ok, mungkin ada beberapa perubahan pada bootstrap. Lihat saja jawaban pilihan teratas yang memberikan solusi yang benar. Dengan elemen tersembunyi, Anda TIDAK dapat menggunakan blok, blok inline dan inline. Dengan kasat mata, Anda HARUS menggunakannya. Saya pikir saya menggunakan bootstrap 3.x.Hanya mencoba solusi Anda untuk elemen yang bersembunyi di ponsel :)
Hammad Khan
2

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>
Gediminas
sumber
1
hidden- * kelas dijatuhkan di bootstrap 4 beta, Anda sekarang menggunakan d- {sm, md, lg, xl} -tidak ada
Chris M
Terima kasih! Untuk jaga-jaga, jawaban saya masih berlaku untuk non-beta
Gediminas
2

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

Przemek Nowak
sumber
itu menyedihkan meskipun tidak bekerja secara normal dengan toggler runtuh
David Constantine
0

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

Tai Ly
sumber