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

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?

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

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

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

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