web-dev-qa-db-fra.com

Manipulation de la colonne en utilisant col-lg-Push et col-lg-pull dans Twitter Bootstrap 3

Je suis en train de lire la documentation sur Twitter Bootstrap 3, et j'ai essayé de suivre l'ordre des colonnes comme indiqué dans cette page , mais je me suis heurté au mur. Je ne comprends pas pourquoi un tel code fonctionne ni comment spécifier correctement le paramètre. Ce que je veux montrer, c’est une grille composée d’une longueur de 5 et l’autre de longueur 5 et enfin d’une longueur de 2.

Donc, le mien est quelque chose comme ça:

[5] [5] [2]

Et ce que je veux réaliser, c’est que, lorsqu’il est visualisé sur le Bureau, la disposition ci-dessus s’affiche, mais lorsqu’il est visualisé sur un mobile, je souhaite afficher d’abord le deuxième objet de longueur 5, puis le premier objet de longueur 5 et enfin l’objet de longueur 2. verticalement. Comme ça:

[5] (second)
[5] (first)
[2]

Alors que j’essayais de suivre l’étape expliquée dans la documentation ci-dessus, j’ai obtenu le premier objet de longueur 5 par rapport au second en dépit d’être sur des plates-formes mobiles, qui, comme je l’ai dit auparavant, devrait afficher un deuxième objet de longueur 5 en haut. En d'autres termes, j'ai ceci:

[5] (first)
[5] (second)
[2]

Alors, comment puis-je correctement mettre le second sur le premier? Ou puisque j'utilise le même objet de longueur, l'ordre des colonnes ne pourrait-il pas fonctionner?

Voici mon code pour votre information:

<div class='row'>
<div class='col-lg-5 col-lg-Push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>

De plus, la documentation ne précise pas ce que pull ou Push signifie. Alors est-ce que je manque quelque chose?

Merci.

csstwitter-bootstrap-3
157
Blaszard

Cette réponse est en trois parties, voir ci-dessous pour la version officielle (v3 et v4)

Je ne pouvais même pas trouver les classes col-lg-Push-x ou pull dans les fichiers d'origine de RC1 i téléchargés, vérifiez donc votre fichier bootstrap.css. j'espère que c'est quelque chose qu'ils vont régler dans RC2.

de toute façon, les classes col-Push- * et pull existaient et cela répondrait à vos besoins. Voici une démo

<div class="row">
    <div class="col-sm-5 col-Push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

EDIT: CI-DESSOUS IS LA RÉPONSE DE LA PUBLICATION OFFICIELLE v3.0

Voir aussi Ce blog sur le sujet

  • col-vp-Push-x = Poussez la colonne à droite par x nombre de colonnes, à partir de où la colonne rendrait normalement -> position: relative, sur un vp ou une vue plus grande -Port.

  • col-vp-pull-x = tirez la colonne à gauche de x nombre de colonnes, en partant de où la colonne rendrait normalement -> position: relative, sur un vp ou une vue plus grande -Port.

    vp = xs, sm, md ou lg

    x = 1 à 12

Je pense que ce qui dérange la plupart des gens, est que vous devez changer l'ordre des colonnes dans votre balise HTML (dans l'exemple ci-dessous, B vient avant A) , et qu'il ne pousse ou tire que sur les ports de vue supérieurs ou égaux à ceux spécifiés. c'est-à-dire que col-sm-Push-5 n'appliquera que 5 colonnes sur sm view-ports ou plus. En effet, Bootstrap est un cadre "mobile first", votre code HTML doit donc refléter la version mobile de votre site. Les Pushing et Pulling sont ensuite effectués sur les écrans les plus grands.

  • (Bureau) Les ports de vue plus grands sont poussés et tirés.
  • (Mobile) Les plus petits ports d'affichage sont rendus dans l'ordre normal.

DÉMO

<div class="row">
    <div class="col-sm-5 col-sm-Push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

Port de vue> = sm 

|A|B|C|

View-port <sm 

|B|
|A|
|C|

EDIT: CI-DESSOUS IS LA RÉPONSE DE v4.0

Avec v4, flexbox et les autres modifications apportées au système de grille. Les classes Push\pull ont été supprimées au profit de flexbox ordering.

  • Utilisez les classes .order-* pour contrôler l'ordre visuel (où * = 1 à 12)
  • Cela peut également être spécifique au niveau de la grille .order-md-*
  • Aussi .order-first (-1) et .order-last (13) disponible
<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>
280
Schmalzy

Pull "tire" le div vers la gauche du navigateur et Push "repousse" le div en partant de la gauche du navigateur.

Comme: enter image description here

Donc, dans une disposition en 3 colonnes de toute page Web, le "Corps principal" apparaît dans le "Centre" et dans la vue "Mobile", le "Corps principal" apparaît en "Haut" de la page. Ceci est principalement souhaité par tout le monde avec une disposition en 3 colonnes.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-Push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

Vous pouvez le voir ici: http://jsfiddle.net/DrGeneral/BxaNN/1/

J'espère que ça aide

36
DrGeneral

J'avais juste l'impression d'ajouter 0,2 $ à ces 2 bonnes réponses. J'ai eu un cas où je devais déplacer la dernière colonne tout en haut vers le haut dans une situation de 3 colonnes.

[A] [B] [C]

à

[C]

[A]

[B]

La classe .col-xx-Push-X de Boostrap ne fait rien d'autre que de pousser une colonne à droite avec left: XX%; de sorte que tout ce que vous avez à faire pour pousser une colonne à droite consiste à ajouter le nombre de pseudo-colonnes allant à gauche.

Dans ce cas:

  • deux colonnes (col-md-5 et col-md-3) vont à gauche, chacune avec la valeur de celle qui va à droite;

  • un (col-md-4) va à droite par la somme des deux premiers va à gauche (5 + 3 = 8);

<div class="row">
    <div class="col-md-4 col-md-Push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

enter image description here

15
Kuba

Idée fausse Une idée fausse commune avec le classement des colonnes est que je devrais (ou pourrais) faire le push et le pull sur les périphériques mobiles, et que les vues du bureau devraient être rendues en l'ordre naturel du balisage. C'est faux.

Réalité Bootstrap est un premier cadre mobile. Cela signifie que l'ordre des colonnes dans votre balise HTML doit représenter l'ordre dans lequel vous souhaitez les afficher sur les appareils mobiles. Cela signifie que les opérations de poussée et d'extraction sont effectuées sur les plus grandes vues du bureau. et non sur la vue des appareils mobiles.

Brandon Schmalz - Développeur Web Full Stack Consultez la description complète ici

15
Syed Ali

Si vous avez besoin d’organiser les données en colonnes de 1/2/4 en fonction de la taille de la fenêtre, Push et Pull peuvent ne pas être une option du tout. Peu importe la façon dont vous commandez vos articles en premier lieu, l’une des tailles peut vous donner un ordre erroné.

Une solution dans ce cas consiste à utiliser des lignes et des colonnes imbriquées sans classes Push ou Pull.

Exemple

En XS vous voulez ...

A
B
C
D
E
F
G
H

En SM vous voulez ...

A   E
B   F
C   G
D   H

Dans MD et au-dessus, vous voulez ...

A   C   E   G
B   D   F   H


Solution

Utilisez des éléments enfants imbriqués à deux colonnes dans un élément parent entourant à deux colonnes:

Voici un extrait de travail:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

Un autre avantage de cette solution est que les éléments apparaissent dans le code dans leur ordre naturel (A, B, C, ... H) et ne doivent pas être mélangés, ce qui est agréable pour la génération de CMS.

2
Jpsy