Bootstrap 3.0:réactif colonne réinitialise la section de la documentation

Hé oui, dans le bootstrap 3.0 documentation si vous regardez sous le sous-titre "responsive colonne réinitialise" il est dit ce qui suit:

"Avec les quatre niveaux de grilles disponibles, vous êtes lié à courir dans des questions où, à certains points d'arrêt, de vos colonnes ne désactivez pas tout à fait juste que l'un est plus grand que l'autre. Pour remédier à cela, l'utilisation d'une combinaison d'une .clearfix et nos sensible de l'utilitaire de classes."

Maintenant que veulent-ils dire par là? J'ai pensé flotteurs désactivée ou n'a pas-en fonction de la largeur. Ce qui me manque ici?

Pas exactement clair sur moi-même, je suis en utilisant bootstrap 3.0 sur ce site web www.homevana.com et les choses sont à la recherche de la bonne échelle de grands écrans, support des écrans et les tablettes, et je n'ai pas utilisé leur clearfix classe n'importe où si cela soulage vos préoccupations à tous
Salut Brian, bien bon à savoir, mais ce serait encore l'aimer si quelqu'un pouvait nous expliquer cela.. Ne connaissais pas la hauteur n'avait rien à voir avec la compensation.

OriginalL'auteur Demetrio M. | 2013-10-04

twitter-bootstrap twitter-bootstrap-3

25

~~je crois que l'exemple sur http://getbootstrap.com/css/#grid-responsive-resets est erronée et non illustrant le problème.~~

L'exemple sur http://getbootstrap.com/css/#grid-responsive-resets pas visuel illustrant le problème.

vos colonnes ne désactivez pas tout à fait juste que l'un est plus grand que l'autre

exemple sans clearfix:
```
<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:red;height:40px;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:green;">.col-xs-6 .col-sm-3 (left)</div>
  <div class="col-xs-6 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3 (right)</div>
</div>
```
Extra small (xs) avec la première colonne (rouge) de plus grande alors la deuxième (bleu )sera la cause de la troisième (vert) de la colonne de flotter sur le côté droit de la première.

sans clearfix

avec clearfix
```
<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:red;height:40px;">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:blue;">.col-xs-6 .col-sm-3</div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3" style="background-color:green;">.col-xs-6 .col-sm-3 (left)</div>
  <div class="col-xs-6 col-sm-3" style="background-color:yellow;">.col-xs-6 .col-sm-3 (right)</div>
</div>
```
col-*-12

Le problème se produit également lorsque vous ajoutez plus de 12 colonnes dans une ligne et un de ces lignes devrait être de 100% (col-*-12).

Considérer cette situation:

Sur les réseaux que vous souhaitez:
```
1 | 2 | 3
```
Sur le xs grille que vous voulez:
```
1 | 2 
3 
```
Vous pouvez y parvenir avec:
```
Without clearfix:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">1</div>
<div class="col-xs-6 col-sm-4">2</div>
<div class="col-xs-12 col-sm-4" style="background-color:red;">3</div>
</div>
</div>  
```
Le fond rouge va vous montrer la dernière colonne du chevauchement entre la première. L'ajout de la clearfix supprimer ce contexte:
```
With clearfix:  
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">1</div>
<div class="col-xs-6 col-sm-4">2</div>

  <div class="clearfix visible-xs"></div>
<div class="col-xs-12 col-sm-4" style="background-color:red;">3</div>
</div>
</div>  
```
Les résultats:

Le chevauchement mentionné sera la cause par le col-12-* classes n'ont pas un float à gauche, voir aussi: https://github.com/twbs/bootstrap/issues/10152

Sur https://github.com/twbs/bootstrap/issues/10535, vous trouverez une autre illustration. Ce violon montre comment le clearfix permettra de résoudre le problème. Note <div class="col-sm-3"> ici n'ont pas une col-12-*. Sur le xs de colonnes de la grille sont 100% par défaut et de ne pas avoir un flotteur de sorte col-xs-12-* agira de la même chose que d'avoir non classe du xs grille.

Hey Bass merci pour la réponse détaillée. Donc si j'ai bien compris, sur xs la troisième colonne dans votre exemple glisse simplement en place et, par-dessus les deux premiers car il n'est pas évoquée. Merci pour l'explication,je parie que très peu de gens vont être surpris par le peu.
oui c'est vrai. J'ai aussi poster une suggestion ici github.com/twbs/bootstrap/issues/10938.
Peut, il être réalisé à l'aide de CSS? Je veux dire, sans ajout <div class="clearfix"></div>
vous devez étudier l' getbootstrap.com/css/#grid-less Bootstrap comprend également un clearfix mixin.
Ya, je l'ai réussi mais moins.. Mais encore, je voulais savoir la manière officielle.. j'ai enlevé flotteur à partir de leurs éléments respectifs à l'aide de pseudo: les sélecteurs

OriginalL'auteur Bass Jobsen

Vous devez vous connecter pour publier un commentaire.

sans clearfix

avec clearfix

col-*-12