web-dev-qa-db-fra.com

Dans Twitter Bootstrap 2, comment puis-je obtenir les bonnes colonnes pour se déplacer vers le haut lorsque l'on réduit l'écran?

J'utilise une disposition fluide à 2 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, lors du redimensionnement de la fenêtre du navigateur, Bootstrap répond 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 le résumé de mon code 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>

Existe-t-il un moyen d'avoir mainContainer à gauche et les widgets à droite dans une fenêtre large, mais accrocher sidebar en haut lorsque la fenêtre est réduite?

htmlcsstwitter-bootstrap
39
eterps

Répondant à une question très similaire à celle d’aujourd’hui, vous pouvez le voir ici , il s’agissait essentiellement de déplacer le flot de la barre latérale en le faisant flotter vers la droite et en compensant la marge de gauche puis réinitialiser l'attribut float de la barre latérale avec une requête @media pour l'adapter à nouveau à la barre latérale avec sa valeur par défaut à partir de la feuille de style d'amorçage.

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 de la question précédente: violon , éditez ici .

27
Andres Ilich

Dans bootstrap 3, cette opération est effectuée 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 le div supérieur derrière le div inférieur s'il y a assez d'espace. Si la taille de l'écran est réduite, la valeur div supérieure reste active.

31
konqi

Je viens après que la question soit résolue avec un très moyen simple pour y parvenir. Pas besoin de @media ni de pourcentage:

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

En conséquence, vous aurez votre barre latérale à droite pour le bureau et au-dessus pour les mobiles.

Exemple:

--- 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;
}
5
Benj

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

3
ScottS

Je suis venu avec une solution super simple qui semble fonctionner avec au moins une disposition de 2 colonnes. Créez simplement une nouvelle classe pour votre balisage et quelques CSS simples.

HTML (extrait de mon Drupal .tpl)

<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;
}

Cela pourrait probablement être affiné un peu plus mais cela fonctionne.

2
dv8withn8

La réponse acceptée fonctionne très bien. Alternativement, parfois, les choses sont compliquées quand vous avez plusieurs morceaux de HTML qui doivent apparaître aux positions anti-bootstrap. Il est également possible de le résoudre en créant des copies HTML dupliquées et en utilisant .visible-phone et .hidden-phone pour contrôler leur affichage/masquage.

<div class="row-fluid">
<div class="span12 visible-phone">
    <ul>
        <li><a href="">tab1</a></li>
        <li><a href="">tab2</a></li>
        <li><a href="">tab3</a></li>
        <li><a href="">tab4</a></li>

    </ul>
</div>
</div>

<div class="row-fluid">
<div class="span9">

      <p>
             Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus    commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
      </p>
</div>
<div class="span3 hidden-phone">
    <ul>
        <li><a href="">tab1</a></li>
        <li><a href="">tab2</a></li>
        <li><a href="">tab3</a></li>
        <li><a href="">tab4</a></li>
    </ul>
</div>
</div>

violon

0
Cullen SUN