En Twitter Bootstrap 2, ¿cómo puedo hacer que las columnas correctas se muevan hacia la parte superior al reducir la pantalla?

StackOverflow https://stackoverflow.com/questions/9386441

  •  28-10-2019
  •  | 
  •  

Pregunta

Estoy usando un diseño fluido de 2 columnas en Twitter Bootstrap.La columna de la izquierda es el contenido principal (span10) y la columna de la derecha es una barra lateral para widgets (span2).Actualmente, al cambiar el tamaño de la ventana del navegador, Bootstrap responde creando una columna con la sección más a la izquierda en la parte superior y la más a la derecha en la parte inferior.Me gustaría al revés.

Esta es la esencia de mi 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>

¿Hay alguna manera de tener mainContainer a la izquierda y widgets a la derecha en una ventana amplia, pero ajuste sidebar ¿Arriba cuando la ventana se encoge?

¿Fue útil?

Solución

Respondió a una pregunta muy parecida a esta hoy, puede verla aquí . Básicamente, se redujo acambiando el flujo de la barra lateral flotando hacia la derecha y compensando el margen izquierdo del área de contenido y luego restableciendo el atributo flotante de la barra lateral con una consulta @media para acomodar la barra lateral una vez más con su valor predeterminado de la hoja de estilo bootstrap.

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

Aquí hay una demostración reelaborada de la pregunta anterior: violín , editar aquí .

Otros consejos

En Bootstrap 3, esto se hace con el pedido de la columna de la cuadrícula (ver la documentación de bootstrap 3)

Ejemplo

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

Esto mostrará la parte superior div detrás de la parte inferior div si hay suficiente espacio.Si se reduce el tamaño de la pantalla, la parte superior div permanecerá despierto.

Vengo después de que se resuelva la pregunta con una forma extremadamente simple de lograrlo.Sin necesidad de @media ni porcentaje:

  • Coloque el div que desee en la parte superior de la página para móviles antes del otro div.En este caso, #sidebar viene antes que #mainContainer en su código HTML
  • Dale a #sidebar la clase pull-right
  • Dale a #mainContainer la clase pull-left
  • Establezca el margen izquierdo para esos 2 div en 0

Como resultado, tendrá su barra lateral a la derecha para escritorio y en la parte superior para móviles.

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

Dependiendo de sus parámetros, simplemente invierta los divs sidebar y mainContainer en el orden fuente html y float: right cada uno de ellos.Algo como: http://jsfiddle.net/3g8Bt/ .

Se me ocurrió una solución súper simple que parece funcionar con al menos un diseño de 2 columnas.Simplemente cree una nueva clase para su marcado y CSS simple.

HTML (extraído de mi 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;
}

Esto probablemente podría refinarse un poco más, pero funciona.

La respuesta aceptada funciona muy bien. Alternativamente, a veces las cosas se complican cuando tiene que aparecer varias partes de html en posiciones anti-bootstrap .También es posible resolverlo creando html-snips duplicados y usando .visible-phone y .hidden-phone para controlar su show / hide. 

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

violín

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top