Dans Twitter Bootstrap 2, comment faire pour que les colonnes de droite se déplacent vers le haut lorsque l'écran est réduit ?

Question

Dans Twitter Bootstrap 2, comment faire pour que les colonnes de droite se déplacent vers le haut lorsque l'écran est réduit ?

Demandé el 21 de Février, 2012: Quand la question a-t-elle été
21830 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'utilise une mise en page fluide à deux colonnes dans Twitter Bootstrap. La colonne de gauche est le contenu principal (span10), et la colonne de droite est une barre latérale pour les widgets (span2). Actuellement, lorsque l'on redimensionne la fenêtre du navigateur, Bootstrap réagit en créant une colonne avec la section la plus à gauche en haut et la plus à droite en bas. J'aimerais que ce soit l'inverse.

Voici l'essentiel de mon html :

<body>
  <div id="content" class="container-fluid">
    <div id="content-row-1" class="row-fluid">
      <div id="mainContainer" class="span10"> Lots of content goes here </div>
      <div id="sidebar" class="span2"> Widgets   </div>
    </div>  <!-- content-row-1 -->
  </div>  <!-- content -->
</body>

Y a-t-il un moyen d'avoir mainContainer à gauche et les widgets à droite dans une fenêtre large, mais l'accroche sidebar en haut lorsque la fenêtre se rétrécit ?

Demandé el 21 de Février, 2012 par eterps

Answer 1

5 Réponses

Answer 2

32voto

konqi Points 1212

Dans bootstrap 3, ceci est fait avec l'ordre des colonnes de la grille. ( voir la documentation de bootstrap 3 )

Exemple

<div class="row">
   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Cela montrera la partie supérieure div derrière la partie inférieure div s'il y a suffisamment d'espace. Si la taille de l'écran est réduite, la partie supérieure div restera en place.

Répondu el 4 de Octobre, 2013 par konqi (1212 Points )

Answer 3

27voto

Andres Ilich Points 41712

J'ai répondu à une question similaire à celle-ci aujourd'hui, vous pouvez la voir. aquí En fait, il s'agissait de décaler le flux de la barre latérale en la faisant flotter vers la droite et en compensant la marge gauche de la zone de contenu, puis de réinitialiser l'attribut float de la barre latérale avec une balise @media pour que la barre latérale reprenne sa valeur par défaut de la feuille de style de l'architecture d'origine.

CSS

body {
    padding-top: 60px;
    padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}

#sidebar {
    float:right;
}

#content {
    margin-left: 0;
}

@media (max-width: 767px) {
    #sidebar {
        float:none;
    }
}

Voici une démo retravaillée à partir de la question précédente : violon , modifier aquí .

Répondu el 22 de Février, 2012 par Andres Ilich (41712 Points )

Answer 4

5voto

Benjamin Sinclaire Points 4995

Je viens après que la question ait été résolue avec un extrêmement moyen simple pour y parvenir. Pas besoin de @media ni de pourcentage :

Placez la division que vous voulez en haut de la page pour les mobiles avant l'autre division. Dans ce cas, #sidebar vient avant #mainContainer dans votre code HTML.
Donner à #sidebar la classe pull-right
Donnez à #mainContainer la classe pull-left
Définissez la marge gauche de ces 2 divs à 0

Ainsi, votre barre latérale se trouvera à droite sur le bureau et en haut sur les mobiles.

Ejemplo:

--- HTML 

<div id="content" class="container-fluid">
  <div id="content-row-1" class="row-fluid">
    <div id="sidebar" class="span2 pull-right"> Widgets   </div>
    <div id="mainContainer" class="span10 pull-left"> Lots of content goes here </div>
  </div>  <!-- content-row-1 -->
</div>  <!-- content -->

--- CSS

div#sidebar, div#mainContainer {
  margin-left: 0;
}

Répondu el 15 de Juillet, 2013 par Benjamin Sinclaire (4995 Points )

Answer 5

3voto

ScottS Points 37738

En fonction de vos paramètres, il suffit d'inverser le sidebar y mainContainer divs dans l'ordre de la source html et float: right chacun d'eux. Quelque chose comme : http://jsfiddle.net/3g8Bt/ .

Répondu el 21 de Février, 2012 par ScottS (37738 Points )

Answer 6

2voto

dv8withn8 Points 26

J'ai trouvé une solution super-simple qui semble fonctionner avec au moins une mise en page à 2 colonnes. Il suffit de créer une nouvelle classe pour votre balisage et quelques CSS simples.

HTML (tiré de mon .tpl Drupal)

<div class="row-fluid">
    <div class="span9 pull-right re-order">
        <?php print $content['content']; ?>
    </div>
    <div class="span3 re-order">
        <?php print $content['sidebar']; ?>
    </div>
</div>

CSS

.row-fluid .re-order {
    margin: 0;
}

.row-fluid [class*="span"]:last-child {
    margin-right: 2.7624309392265194%;
    margin-left: 0;
}

On pourrait probablement l'affiner un peu plus, mais cela fonctionne.

Répondu el 14 de Mai, 2013 par dv8withn8 (26 Points )

Dans Twitter Bootstrap 2, comment faire pour que les colonnes de droite se déplacent vers le haut lorsque l'écran est réduit ?

Réponses

HTML (tiré de mon .tpl Drupal)

CSS

Questions en vedette

Top Tags

Prograide.com

Powered by:

Dans Twitter Bootstrap 2, comment faire pour que les colonnes de droite se déplacent vers le haut lorsque l'écran est réduit ?

Réponses

HTML (tiré de mon .tpl Drupal)

CSS

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: