web-dev-qa-db-fra.com

Twitter bootstrap masquer l'élément sur de petits périphériques

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 des textes à l'intérieur. Ils ont la même largeur. J'ai réglé col-sm-3 sur chacun d'entre eux. Ce que je veux faire, c'est cacher le dernier nav sur de très petits périphériques. J'ai essayé d'utiliser hidden-xs sur ce nav et il le cache, mais dans le même temps, je souhaite que les autres blocs soient développés (changement de classe de col-sm-3 à col-sm-4 ) col-sm-4 X 3 = 12.

Toute solution?

htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design
86
Crisan Raluca Teodora

Sur un 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 les classes xs et sm.

Voici des liens vers le document officiel à propos de classes responsive disponibles et à propos de système de grille .

ont en tête:

  • 1 ligne = 12 colonnes
  • Pour X tra S dispositif de centre commercial : col-xs -__
  • Pour SM tout appareil : col-sm -__
  • Pour M e D Dispositif ium : col-md -__
  • Pour L ar G e périphérique : col-lg -__
  • Rendre visible uniquement (masqué sur autre): visible-md (seulement visible en milieu [pas en lg xs ou sm])
  • Marque seulement caché (visible sur autre): hidden-xs (juste caché dans XtraSmall)
145
Pimento Web

Bootstrap 4

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

d-none d-sm-block

Voir aussi: Visible manquant - ** et caché - ** dans Bootstrap v4

Bootstrap 3 (réponse originale)

Utilisez la classe d'utilitaires hidden-xs.

<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

76
Zim

Pour Bootstrap 4.0 il y a une modification

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

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

d-none d-sm-block

Le premier ensemble de classes affiche none pour tous les appareils et le second 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

19
Przemek Nowak
<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 votre texte par défaut.

Cette réponse répond à la question dans le titre du PO (c’est comment j’ai trouvé ce Q/A).

12
Chris O