Question

Comment puis-je réaliser la disposition à deux colonnes suivante dans Bootstrap?

  • Colonne 1: La largeur s'adapte à la taille disponible, entre une min et une largeur maximale
  • Colonne 2: Largeur de taille fixe

Par exemple, si j'ai:

  • Colonne 1 min largeur: 300px
  • Colonne 1 Largeur max: 800px
  • Colonne 2 Largeur: 400px

Dans une résolution avec une largeur de 800px disponibles, je m'attendrais à ce que les deux colonnes soient de 400px de large. Dans une résolution avec 2000px disponible, je m'attendrais à ce que la première colonne soit de 800px, la deuxième colonne est de 400px, et il y aurait 800 pix d'espace vide à droite de l'écran.

Était-ce utile?

La solution

Dur parce que bootstrap est utile pour réactif, non statique ...

Peut-il être correct de cette manière: http://bootply.com/98214

html

<div class="row">
  <div id="col1" class="col-xs-6 col-md-5">coco 1</div>
  <div id="col2" class="col-xs-6 col-md-2">coco 2</div>
</div>

CSS

#col1{
  background:green;
  max-width:800px !important;
}

#col2{
  background:yellow;
  max-width:400px !important;
}

Vous ne devriez pas utiliser la largeur min car en cas de petit appareil supplémentaire, il n'aura pas de bon rendu

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top