web-dev-qa-db-fra.com

Bootstrap 3 hidden-xs rend la ligne plus étroite

J'expérimente avec Bootstrap 3 grilles réactives et j'essaie de faire disparaître une colonne à partir d'une ligne lorsque la taille de l'écran est petite. Je peux obtenir la colonne à disparaître, mais la ligne entière semble obtenir plus étroit en conséquence.

Voici mon code qui me donne du chagrin:

<div class="container">
 <div class="row">
  <div class="col-xs-4 col-sm-2 col-md-1" align="center">
   Col1
  </div>
  <div class="col-xs-4 col-sm-2" align="center">
   Col2
  </div>
  <div class="col-xs-12 hidden-xs col-sm-6 col-md-5" align="center">
   Col3
  </div>
  <div class="col-xs-12 hidden-xs col-sm-12 hidden-sm col-md-3 " align="center">
   Col4
  </div>
  <div class="col-xs-4 col-sm-2 col-md-1" align="center">
   Col5
  </div>
 </div>
</div>

Les colonnes Col4, puis Col3 disparaissent à mesure que l'écran devient plus petit mais que la ligne se rétrécit à chaque suppression (par rapport à une ligne d'en-tête qui ne change pas). Je ne comprends pas pourquoi, car je me suis assuré que tous les blocs totalisent une largeur de 12 pour chaque étape du processus. Je pensais que le problème était peut-être le col-xs-12, mais le supprimer empêche la suppression de la colonne et place la colonne supprimée dans Col5!

Il me manque manifestement "quelque chose" mais je ne trouve rien qui puisse m'aider - j'espère que je trouverai l'illumination ici.

htmlcsstwitter-bootstrap-3
32
branty1970

Comment cela fonctionne-t-il si vous utilisez uniquement visible-md sur Col4? Utilisez-vous le -lg du tout? Sinon, cela pourrait fonctionner.

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-sm-2 col-md-1" align="center">
            Col1
        </div>
        <div class="col-xs-4 col-sm-2" align="center">
            Col2
        </div>
        <div class="hidden-xs col-sm-6 col-md-5" align="center">
            Col3
        </div>
        <div class="visible-md col-md-3 " align="center">
            Col4
        </div>
        <div class="col-xs-4 col-sm-2 col-md-1" align="center">
            Col5
        </div>
    </div>
</div>
52
Jimmie Johansson