row-fluid vs row dans le bootstrap de Twitter
J'ai un élément conteneur container-fluid et j'utilise row au lieu de row-fluid, certes par ignorance.
Maintenant, j'essaie de remplacer la classe row par la classe row-fluid, mais j'ai rencontré quelques questions.
Tout d’abord, j’ai examiné la définition de la largeur de row-fluid dans le fichier .less, qui est complètement hiéroglyphique. Quelqu'un voudrait-il expliquer?
Plus important encore, lorsque je remplace row par row-fluid, la hauteur de l'élément se réduit à 0, ce qui m'oblige à inclure la classe .clearfix afin que l'élément row-fluid puisse contenir ses colonnes enfants. Pourquoi est-ce nécessaire, c’est-à-dire ce qui est flottant et pourquoi quand je remplace row par row-fluid?
Toute contribution, hormis le Why do not you google it? sournois (que j’ai fait) serait grandement appréciée.
Cela dépend de quels éléments vous voulez connaître la largeur. La classe row-fluid elle-même a une largeur de 100%. Les étendues (ou colonnes) ont une largeur relative, configurée de manière à ce qu’elles se combinent à 100.
Sur le flottant: toutes les colonnes sont flottées, c'est ce qui le rend fluide. La seule chose liée à la hauteur que row-fluid fait est de définir min-height: 30px. Cela rend par définition étrange que rien ne s'écroule à une hauteur de 0.
Je soupçonne que le style que vous avez appliqué au-dessus de votre ancienne grille est la cause de vos principaux problèmes.
Voici ce que dit Twitter Bootstrap:
Les rangées doivent être placées dans un conteneur. (Largeur fixe) ou .container-fluid (pleine largeur) pour un alignement et un remplissage corrects.
Eh bien, c’est à peu près container pas rows, mais si cette explication ne vous suffit pas, alors c’est la courte explication qui devrait vous éclairer.
NOTE: Si sa version 2, alors row-fluid est lui-même float: left qui devra être effacé comme vous le dites.
En effet, les grilles fluides utilisent l’imbrication de manière différente: chaque niveau imbriqué de colonnes doit ajouter 12 colonnes. En effet, la grille de fluide utilise des pourcentages, et non des pixels, pour définir les largeurs.
J'espère que cela t'aides :)
Modification de classe de Bootstrap 2.x à 3.0 Bootstrap 2.x -> .row-fluid et Bootstrap 3.0 -> .row