Élément de cache de bootstrap Twitter sur les petits appareils

J'ai ce code:

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

Quatre blocs avec quelques textes à l'intérieur. Ils ont la même largeur, je les ai col-sm-3tous définis et ce que je veux faire, c'est masquer le dernier navsur des appareils très petits. J'ai essayé d'utiliser hidden-xsce navet le cache, mais dans le même temps , je veux que les autres blocs pour étendre (classe de changement de col-sm-3la col-sm-4) col-sm-4 X 3 = 12.

Toute solution?

Sur petit appareil: 4 columns x 3 (= 12) ==> col-sm-3

Sur très petit: 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>

Comme vous le dites, hidden-xs ne suffit pas, vous devez combiner xs et sm class.

Voici des liens vers la documentation officielle sur les classes responsives disponibles et sur le système de grille .

Avoir en tête:

• 1 rang = 12 cols
• Pour l'appareil X tra S mall : col-xs -__
  
• Pour tous les appareils SM : col-sm -__
  
• Pour le périphérique M e D ium : col-md -__
  
• Pour l'appareil L ar G e : col-lg -__
  
• Rendre visible uniquement (masqué sur les autres): visible-md (juste visible dans medium [pas dans lg xs ou sm])
• Rendre caché uniquement (visible sur les autres): hidden-xs (juste caché dans XtraSmall)

Bootstrap 4

Les classes d'affichage (masquées / visibles) sont modifiées dans Bootstrap 4. Pour masquer dans la xsfenêtre, utilisez:

d-none d-sm-block

Voir aussi: Manquant visible - ** et masqué - ** dans Bootstrap v4

Bootstrap 3 (réponse originale)

Utilisez la hidden-xsclasse utilitaire.

<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

Pour Bootstrap 4.0, il y a un changement

Voir la documentation: https://getbootstrap.com/docs/4.0/utilities/display/

Pour masquer le contenu sur mobile et l'afficher sur les plus gros appareils, vous devez utiliser les classes suivantes:

d-none d-sm-block

Le premier ensemble de classes n'en affiche aucun sur tous les appareils et le second l'affiche pour les appareils «sm» up (vous pouvez utiliser md, lg, etc. au lieu de sm si vous souhaitez afficher sur différents appareils.

Je suggère de lire à ce sujet avant la migration:

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

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

Cela fonctionne également pour les éléments qui ne sont pas nécessairement utilisés dans une grille / petite colonne. Lorsqu'il est rendu sur des écrans plus grands, la taille de la police sera plus petite que la taille de la police par défaut.

Cette réponse répond à la question dans le titre de l'OP (c'est ainsi que j'ai trouvé cette Q / A).