web-dev-qa-db-fra.com

Réorganiser les div en mode avec Twitter Bootstrap?

Je travaille avec Twitter Bootstrap v3 et je souhaite réorganiser les éléments de manière réactive en utilisant ordre des colonnes et compensation .

C'est comme ça que j'aimerais utiliser mes éléments. Aux points d'arrêt -xs ou -sm, avec le div conteneur empilé de 4 sur une ligne:

enter image description here

Aux points d'arrêt -md ou -lg, avec le div contenant empilé 2 sur une ligne:

enter image description here

Ceci est le code actuel - je sais comment définir les classes sur le div conteneur, mais pas sur A, B et C:

  <div class="row">
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
      <div class="row">
       <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
       <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
       <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
      </div>
    </div>
    ... more containing divs...
  </div>

Je n'arrive pas à comprendre comment obtenir A, B et C dans le bon ordre avec les colonnes de Bootstrap 3 et compensant . Est-ce réellement possible?

C’est aussi long que j’ai utilisé JSFiddle: http://jsfiddle.net/3vYgR/

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3
19
Richard

Je pense que vous voulez regarder les classes Push et pull ...

<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-Push-6 col-md-Push-6">Content of A</div>
   <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
   <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-Push-6 col-md-Push-6">Content of C</div>
</div>

Démo: http://bootply.com/77853

23
Zim

Toute raison de ne pas utiliser des méthodes plus traditionnelles sur ce sujet, à savoir. B flottant à gauche et les autres éléments à droite?

Comme si vous aviez ajouté ceci au CSS actuel dans votre jsfiddle:

.b {
    float: left;
    width: 50%;
    height: 100px;
}
.a, .c {
    float: right;
    width: 50%;   
    height: 50px;
}

Voir http://jsfiddle.net/E6BFk/

Je ne suis pas sûr que l'ordre des colonnes de Bootstrap puisse produire l'effet d'empilement, peut-être uniquement la réorganisation ... Bien que la documentation soit assez mince sur cette fonctionnalité.

1
rsigg

La réponse fournie par @skelly est un excellent point de départ, mais pose certains problèmes d'alignement vertical. ImaginezAest un grand div, alorsCest aligné verticalement sous A:

[A] [B]
[ ]
    [C]

En outre, si vous souhaitez aller plus loin, vous devrez peut-être également utiliser des blocs clearfix. Par exemple;

<!-- Add clearfix for only the required viewport(s) -->
<div class="clearfix visible-md-block visible-lg-block"></div>

Sans clearfixmd ou lg pourrait aboutir à:

[A] [B]
    [C] [D]

Ceci est particulièrement important si vous voulez plus de 2 éléments dans la "colonne" finale, ou si les hauteurs des éléments commencent à jeter d'autres éléments hors de l'alignement.

Avec clearfixmd ou lg serait:

[A] [B]
    [C]
    [D]

Exemple de violon: http://jsfiddle.net/L5174o8d/

0
Mark Cooper

J'ai essayé le Push/pull comme indiqué dans la réponse de Skelly, mais C se retrouve dans une nouvelle rangée une fois les hauteurs appliquées: http://www.bootply.com/Q3djHYawgb#

Si B peut être affiché en premier lorsqu'il est affiché en petite taille, alors je pense qu'il est plus logique de créer une ligne à l'intérieur de la colonne de droite pour contenir A et C:

<div class="containing row">
    <div class="b col-xs-12 col-md-6">Content of B</div>
    <div class="ac col-xs-12 col-md-6">
        <div class="row">
            <div class="a col-xs-12">Content of A</div>
        </div>
        <div class="row">
            <div class="c col-xs-12">Content of C</div>
        </div>
    </div>
</div>

Voir http://jsfiddle.net/hoodoo99/L2BE9/

0
Dave