Küçük cihazlarda Twitter bootstrap gizleme öğesi


92

Bu koda sahibim:

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

İçinde bazı metinler bulunan dört blok. Genişlikleri eşit, col-sm-3hepsine ayarladım ve yapmak istediğim sonuncuyu navekstra küçük cihazlarda gizlemek . Ben kullanımına denedim hidden-xsbu konuda navve bunu gizler, ancak aynı sürede diğer blokları (gelen değişim sınıfını genişletmek istediğiniz col-sm-3kadar col-sm-4) col-sm-4 X 3 = 12.

Herhangi bir çözüm?

Yanıtlar:


153

Küçük cihazda: 4 columns x 3 (= 12) ==> col-sm-3

Çok küçük: 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>

Dediğiniz gibi gizli-xs yeterli değil, xs ve sm sınıfını birleştirmelisiniz.


Burada, mevcut duyarlı sınıflar ve grid sistemi hakkındaki resmi belgeye bağlantılar bulunmaktadır .

Kafanın içinde:

  • 1 satır = 12 sütun
  • İçin X- tra S merkezi cihazı : col-xs -__
  • İçin SM tüm cihaz : col-sm -__
  • İçin M E D yum Aygıt : col-MD -__
  • İçin L ar G E Aygıt : col-lg -__
  • Yalnızca görünür yap (diğerinde gizli): görünür-md (yalnızca orta olarak görünür [lg xs veya sm'de değil])
  • Yalnızca gizli yap (diğerinde görünür): gizli xs (yalnızca XtraSmall'da gizlenir)

Önyükleme 4'te, gizli-SIZE- (yukarı | aşağı) yoluyla köpürmeyi belirtmeniz gerektiği anlaşılıyor. Ör: hidden-sm-down
Evan Siroky

Bootstrap 2 için sınıfı kullanınhidden-phone
Katie

84

Önyükleme 4

Ekran (gizli / görünür) sınıfları ile ilgili deri, özyükleme 4'te değiştirilir xsgörünüm kullanımı:

d-none d-sm-block

Ayrıca bkz: Bootstrap v4'te görünmez - ** ve gizli - **


Bootstrap 3 (orijinal cevap)

Hizmet hidden-xssınıfını kullanın ..

<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


Bu sınıfı kullandım ama yardımcı olmadı, ancak örneğinizde diğer nav'lara ekranlarını% 25'ten% 33'e değiştiren başka sınıflar eklediniz. İşte buydu! Thx
Crisan Raluca Teodora

Rica ederim, ancak örneğinizde "gizli-xs" kullanarak daha önce bahsettiğinizi özledim. @ Jahnux73 cevabı için +1
Zim

23

Bootstrap 4.0 için bir değişiklik var

Dokümanlara bakın: https://getbootstrap.com/docs/4.0/utilities/display/

İçeriği mobil cihazlarda gizlemek ve daha büyük cihazlarda görüntülemek için aşağıdaki sınıfları kullanmanız gerekir:

d-none d-sm-block

Birinci sınıf set tüm cihazlarda hiçbirini göstermez ve ikincisi onu "sm" up cihazlar için gösterir (farklı cihazlarda göstermek istiyorsanız sm yerine md, lg vb. Kullanabilirsiniz.

Göçten önce bunu okumanızı öneririm:

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


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

Bu aynı zamanda bir ızgara / küçük sütunda kullanılması gerekmeyen öğeler için de işe yarar. Daha büyük ekranlarda görüntülendiğinde yazı tipi boyutu, varsayılan metin yazı tipi boyutunuzdan daha küçük olacaktır.

Bu cevap OP başlığındaki soruyu karşılamaktadır (bu soru / cevapları bu şekilde buldum).


Bu iyi çalıştı. Bunu bir resmi saklamak için kullandım. <div class = "small hidden-xs"> <a href=''link"> </a> </div>
Arindam Roychowdhury
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.