“Tirez center” dans le Bootstrap: A-D - B -E - C colonnes effondrement A-B-C // D-E, comment faire pour obtenir B, D et E?

Je suis pas demandant simple centre de l'alignement de colonnes dans le bootstrap. C'est facile et a été déjà couvertes, ces solutions ne s'appliquent pas à ce que j'essaie de faire ici.

Ce que je veux, est une disposition qui est de cinq colonnes sur l'échelle de périphériques, 2 - 3 - 2 - 3 - 2,
effondrement vers le bas pour avoir les trois 2 colonnes 4 - 4 - 4 puis les deux 3 colonnes 6 - 6.

Quelque chose comme ceci:

  <div class="row">
    <div class="col-xs-4 col-md-2 pull-left">
    A
    </div>

    <div class="col-xs-4 col-md-2 pull-center">
    <!-- of course, pull-center doesn't exist, it's here to illustrate intention -->
    B
    </div>

    <div class="col-xs-4 col-md-2 pull-right">
    C
    </div>

    <div class="col-xs-6 col-md-3"> 
    D
    </div>

    <div class="col-xs-6 col-md-3"> 
    E
    </div>
  </div>

Qui, si pull-center existé et float: middle existait, devrait ressembler à ceci sur une échelle de périphérique:

 A- _D_ B- _E_ C-

...et comme ça, sur une étroite appareil:

 -A-- -B-- -C--
 __D___ __E___

...mais, car il n'y a pas une telle chose comme pull-center ou float: middle;, actuellement ressemble à ceci:

 A- B- _D_ _E_ C-

Comment puis-je obtenir mon B colonne de flotter entre les deux colonnes ci-dessous dans le code HTML? J'ai essayé d'ajouter divers pull- classes et float CSS pour le D et E les colonnes, mais ne peut pas trouver quelque chose qui aide.

InformationsquelleAutor user568458 | 2016-04-17

3

Je pense que c'est ici que vous voulez:
```
<div class="row">
    <div class="col-xs-4 col-md-2">
    A
    </div>
    <div class="col-xs-4 col-md-2 col-md-push-3">
    B
    </div>
    <div class="col-xs-4 col-md-2 col-md-push-6">
    C
    </div>
    <div class="col-xs-6 col-md-3 col-md-pull-4">
    D
    </div>
    <div class="col-xs-6 col-md-3 col-md-pull-2">
    E
    </div>
</div>
```
- Je Utiliser Bootstrap colonne de la commande .

Il peut facilement changer l'ordre de réactivité des colonnes.

Espère que cela aide.

Pour plus d'explications :

(Ordre Original)

(Nouvel ordre)

- poussoir* (déplacer vers la droite * les étapes)

pull-* (déplacer vers la gauche * étapes)

B => à partir de (3) à (6) => pousser 3 étapes

C => à partir de (5) à (11) => appuyez sur 6 étapes

D => à partir de (7) à (3) => tirez-le en 4 étapes

E => à partir de (10) à (8) => pull 2 étapes
- Parfait! Ne peux pas croire que j'ai complètement raté l'introduction de cette fonctionnalité, merci!
InformationsquelleAutor Claire Lee

Au lieu d'utiliser des float, vous pouvez faire usage de .col-*-push-* et .col-*-pull-* Bootstrap modificateur de classes pour modifier la position des éléments.

Vous allez vous retrouver avec quelque chose comme ce qui suit:

<div class="row">
    <div class="col-xs-4 col-md-2">
    A
    </div>

    <div class="col-xs-4 col-md-2 col-md-push-3">
    B
    </div>

    <div class="col-xs-4 col-md-2 col-md-push-6">
    C
    </div>

    <div class="col-xs-6 col-md-3 col-md-pull-4"> 
    D
    </div>

    <div class="col-xs-6 col-md-3 col-md-pull-2"> 
    E
    </div>
  </div>

Voir exemple.

InformationsquelleAutor KrisD

Vous devez vous connecter pour publier un commentaire.