web-dev-qa-db-fra.com

min-width pour la colonne dans Bootstrap grid system

J'ai suivi HTML avec Bootstrap CSS.

<div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col-sm-7" style="min-width: 87px;">Due date</div>
</div>

Sans "largeur minimale", la largeur de la deuxième colonne dans certains cas est inférieure à 120 pixels et le "nom de l'instance" n'est pas entièrement visible. Donc, j'ai ajouté "min-width" et la largeur de la ligne devient plus de 100% dans ces cas. La dernière colonne est encapsulée dans une nouvelle ligne.

Je veux avoir bootstrap largeur de colonne dynamique et ce nom d'instance ne disparaît pas lorsque je réduit la taille de la fenêtre du navigateur. Comment puis-je obtenir un tel comportement?

csstwitter-bootstrapresponsive-designgrid-layout
20
sasha_trn

Je ne sais pas s'il existe un tel moyen d'accomplir ce que vous voulez.

Le col-sm-x définit des pourcentages de largeur spécifiques de votre fenêtre et si vous fournissez des valeurs personnalisées, la largeur cumulée de toutes les colonnes sera supérieure ou inférieure à 100%, ce qui n'est pas le comportement souhaité.

Au lieu de cela, vous pouvez fournir plusieurs classes pour le même div. Exemple:

<div class="row">
  <div class="col-sm-4 col-xs-1">Name</div>
  <div class="col-sm-1 col-xs-3">Instance name</div>
  <div class="col-sm-7 col-xs-2">Due date</div>
</div>

Si cette solution ne suffit pas, vous trouverez très probablement une solution javascript d'une sorte qui définit manuellement la largeur des autres divs.

Il semble y avoir une autre question similaire précédemment publiée ici sur stackoverflow. Jetez un oeil ici .

Grille d'amorçage sur W3Schools

13
Chris

Les colonnes d'amorçage sont des éléments flexibles. Vous devez décider d'une colonne qui devrait rétrécir lorsque les autres ont atteint leur largeur minimale.

Pour votre exemple, j'ai choisi la dernière, "Date d'échéance", qui devrait normalement être la colonne sm-7. Je le réduit à col-sm-1 mais je lui donne flex-grow et nous devons écraser la propriété max-width de bootstraps.

<div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col-sm-1" style="min-width: 87px; flex-grow: 1; max-width:100%; ">Due date</div>
</div>

voici un joli codepen que j'ai fait: https://codepen.io/timar/pen/VQWmQq/

ce qui est également possible est de lui donner une colonne non fixe class = "col", qui n'a pas besoin de remplacer la propriété flex-grow et max-width.

7
Timar Ivo Batis

Avez-vous essayé de modifier vos valeurs pour des résolutions plus petites? Par exemple

  <div class="col-lg-4 col-sm-4">Name</div>
  <div class="col-lg-1 col-sm-2">Instance name</div>
  <div class="col-lg-7 col-sm-6">Due date</div>

Bootstrap propose des options pour différentes tailles d'écran, vous pouvez donc les vérifier: http://getbootstrap.com/css/

6
Armin