CSS - Bootstrap: menos de 767px viewports 2 tramos (o más) por filas en lugar de 1

Question

hay un método predeterminado con Bootstrap o cómo puedo editar para hacer eso debajo de 767px (móvil) cada tramo dentro de una fila no se convierte 100%? Solo quiero que vayan al 50% ... tener, por ejemplo, 2 espacios uno al lado del otro en lugar de uno debajo del otro.

gracias de antemano

Answer 1

Try fila de líquido en lugar de la fila con dos span6.

HTML:

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel='stylesheet' type='text/css' /> 
<div id='wrap' class='container'> 
     <div id='row1' class='row-fluid'> 
      <div id='box1' class='span6'> 
       box1 
      </div> 
      <div id='box2' class='span6'> 
       box2 
       </div> 
     </div> 
</div> 

CSS:

#wrap{ 
    background-color:black; 
    height:50px; 
} 
#box1{ 
     background-color:green; 
} 

#box2{ 
     background-color:red; 
} 

cheque aquí jsFiddle

Answer 2

Sé que esta pregunta es viejo, pero me encontré con que en la búsqueda de una solución a este mismo problema, entonces lo descubrí por mi cuenta. Pensé que debería publicar mi solución en caso de que alguien más encuentre esta página.

Mi problema es que tengo una página de Bootstrap receptiva con cuatro columnas (cuatro elementos de lista span3) y otra página con tres columnas (tres elementos de lista span4). Quería que ambos se convirtieran en dos columnas cuando tuvieran menos de 767px. Mi estructura es así para la página de cuatro columnas, con la fila de líquido repetidas varias veces dentro span12:

<div class="span12"> 
    <div class="row-fluid"> 
     <ul class="thumbnails"> 
      <li class="span3"></li> 
      <li class="span3"></li> 
      <li class="span3"></li> 
      <li class="span3"></li> 
     </ul> 
    </div> 
    </div> 

Y mi estructura es así para la página de tres columnas, de nuevo con la fila de líquido repitió varias veces dentro de span12:

<div class="span12"> 
    <div class="row-fluid"> 
     <ul class="thumbnails"> 
      <li class="span4"></li> 
      <li class="span4"></li> 
      <li class="span4"></li> 
     </ul> 
    </div> 
</div> 

Esa estructura se toma de la sección de Bootstrap sobre miniaturas. Aquí está el CSS añadí para que ambos se convierten en dos columnas por debajo de 767px:

@media screen and (max-width: 767px) { 
/* remove clear from each ul to stop them from breaking into rows */ 
ul.thumbnails::after { 
    clear: none; 
} 

/* make the width of each span equal to 47% instead of 100%. 
You could make it closer to 50% if you have no borders or padding etc. */ 
ul.thumbnails li[class*="span"]{ 
    width: 47%; 
    float: left; 
} 
    // select the second span in each row (ul) on the 3 column page 
[class*="span"] .span4:nth-child(2), 
    // select the first span in the even rows on the 3 column page 
[class*="span"] .row-fluid:nth-child(even) .span4:nth-child(1), 
    // select the even spans in each row on the 4 column page 
[class*="span"] .span3:nth-child(even) 
{ 
    float: right; //float them all to the right 
} 
} 

Usted tendrá que ajustar estos selectores si no se está usando la misma estructura. Tampoco son los selectores más elegantes, así que si puedes escribirlos mejor, hazlo. Tan pronto como los pusiera a trabajar no podría molestarme en jugar con ellos nunca más. ¡Espero que esto ayude a alguien!

[edit] Me acabo de dar cuenta de que en realidad utilizo la fila de fluido en todo mi código, no en la fila de fluidos ... así que puede que tenga que cambiarlo a eso. fluid-row no tiene reglas en mi hoja de estilos.

Enlace a jugar con los selectores CSS correctos en: http://jsfiddle.net/rUCgS/4/

Answer 3

simplemente he modificado el comportamiento de .row-fluid [class*="span"] dentro @media (max-width: 767px) { ... } y cambió de nuevo cuando golpeo max-width: 480px. También agregué una clase .span-control a los 2 primeros tramos de una fila para asegurarme de que ambos tienen su margen izquierdo eliminado.

debe ser similar this

Los !important etiquetas eran útiles para jsFiddle, pero no los necesitará en su hoja de estilo.