Bootstrap changement div commande avec pull-droite, tirer à gauche sur 3 colonnes

J'ai travaillé toute la journée, mais ne pas venir avec une solution. J'ai 3 colonnes sur une seule ligne dans un récipient.

1: contenu à droite – pull-droit

2: navigation – pull-gauche

3: contenu principal

Ce que ça donne sur grand écran:

------------------------------------------------
|   Menu  |      Content      |  Right Content |
------------------------------------------------

À quoi il devrait ressembler sur les petits écrans:

----------------------------
|  Menu  |  Right Content  |
|        |------------------
|        |  Content        |
----------------------------

Quoi il ressemble aujourd'hui:

------------------
| Right Content  |
------------------
| Menu | Content |
------------------

Je pense que c'est juste une simple flottant problème. Mais j'ai essayé presque toutes les possibilités.

InformationsquelleAutor user2982964 | 2013-11-12
  1. 98

    Bootstrap 3

    En utilisant Bootstrap 3 du système de grille:

    <div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

    De travail exemple: http://bootply.com/93614

    Explication

    Tout d'abord, nous avons défini deux colonnes qui restera en place peu importe la résolution de l'écran (col-xs-*).

    Ensuite, nous divisons le plus grand, la main droite de la colonne à deux colonnes qui va s'effondrer sur le dessus de chaque autre sur la tablette de la taille d'appareils et inférieure (col-md-*).

    Enfin, nous décalage de l'ordre d'affichage à l'aide de la correspondance de classe (col-md-[push|pull]-*). Vous poussez la première colonne par le montant de la seconde, et tirez la seconde par le montant de la première.

    • – fonctionne parfaitement! Vous avez sauvé ma journée!!!!
    InformationsquelleAutor Sean Ryan
  2. 5

    Essayez ceci...

    <div class="row">
    <div class="col-xs-3">
        Menu
    </div>
    <div class="col-xs-9">
        <div class="row">
          <div class="col-sm-4 col-sm-push-8">
          Right content
          </div>
          <div class="col-sm-8 col-sm-pull-4">
          Content
          </div>
       </div>
    </div>
</div>

    Bootply

    • Ayant à la fois col-sm-X et col-md-X est inutile. Si vous définissez la grille à la sm, il restera en place au md.
    • Aussi, vous devez toujours placer des colonnes dans une row de sorte qu'il sera couper les gouttières de la première et de la dernière colonne. Voir bootply.com/93628 pour une explication visuelle.
    InformationsquelleAutor Zim