Bootstrap, haciendo cambios sensibles al diseño

Question

Estoy usando un diseño fluido de Twitter Bootstrap para mi diseño y estoy a punto de hacerlo receptivo. Considere una rejilla como este:

<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span8"></div>  
</div> 

¿Cuál es la mejor manera de ocultar y dejar span4 span8 ocupar toda la anchura, que se utilizará cuando la pantalla se hace más pequeño?

Answer 1

Usando una consulta de medios con cualquier min/anchura máxima set .span4 a display: none;

A continuación, añadir .span8 a la regla para .span12 de todo por debajo de lo ancho se oculta .span4 como todo ese trabajo ya está hecho para usted por bootstrap , así que no hay necesidad de duplicar. Se verá algo como esto:

@media (min-width: 320px){ 
    .span12, 
    .span8 { 
     width: 300px; 
    } 
} 

(. Esto último bit de código es sólo un ejemplo, pero no será algo parecido en bootstraps andamios)

Espero que ayude :)

EDITAR:

Esto podría funcionar, lo probé utilizando herramientas de desarrollo en el sitio de arranque y parecía funcionar. Una vez más, en una consulta de medios:

@media (min-width: 320px){ 

    #special .span4 { 
     display: none; 
    } 

    #special .span8 { 
     float: none; 
     width: auto; 
    } 

} 

Answer 2

Con arranque 2.0.2 y hasta puede:

Cambiar el html en:

<div class="row-fluid"> 
    <div class="span4 hidden-phone hidden-tablet"></div> 
    <div class="span8 span12-tablet"></div>  
</div> 

(I interpretaron 'más pequeño' con la tableta y el teléfono tamaños, use sus propias definiciones para otros tamaños)

.hidden-phone y .hidden-tablet ocultan el span4 para pantallas más pequeñas.

para recuperar ese espacio y volver a palmo su span8, agregar esto a su css:

@media (max-width: 979px) { 
    .span12-tablet { 
    width: 91.48936170212765% !important; 
    *width: 91.43617021276594% !important; 
    } 
} 

Si sucede utilizar menos se puede utilizar mixins cuadrícula de arranque:

.span12-tablet { 
    @media (max-width: 979px) { 
     #grid > .fluid > .span(12) !important; 
    } 
} 

Answer 3

Si usa el programa de arranque 2.2.1 puede:

Cambiar el html a:

<div class="row-fluid"> 
    <div class="span4 hidden-phone hidden-tablet"></div> 
    <div class="span8"></div>  
</div> 

Ahora añadir esto a las sustituciones css:

@media (min-width: 768px) and (max-width: 979px) 
{ 
    [class*="span"], 
    .row-fluid [class*="span"] { 
     display: block; 
     float: none; 
     width: 100%; 
     margin-left: 0; 
    } 
} 

Esto también funciona para cualquier otro vanos que ha especificado en su html.

el efecto de estos cambios hace que todos los anchos de tramo sean del 100%, lo que hace que el iPad siempre use el modo fluido de 1 columna en el modo vertical.

Answer 4

Se me ocurrió una pequeña variación de eso.

Añadir stack-tablet clase a un row-fluid para hacer los tramos de pila en la anchura de la tableta, no sólo por la anchura de teléfono (por defecto de arranque):

@media (max-width: 979px) { 
    .row-fluid.stack-tablet [class*="span"] { 
     width: 100%; 
     display: block; 
     float: none; 
     margin-left: 0; 
    } 
} 

se puede utilizar junto con las clases Pantalla- y oculta-.

Answer 5

Esta sería la mejor opción para mantener su dinámica. En mi ejemplo, tengo establecer anchura de 6 columnas junto a fluidGridColumnWidth

[class*="span"] { 
    width: 100%; 

    .row-fluid { 
     [class*="span"] { 
      width: (@fluidGridColumnWidth * 6) + (@fluidGridGutterWidth * (6 - 1)) - (.5/@gridRowWidth * 100 * 1%); 

      float: left; 
      margin-left: @fluidGridGutterWidth; 

      &:first-child { 
       margin-left: 0; 
      } 
     } 
    } 
} 

Answer 6

escribe como esto

en el dispositivo de teléfono de este div ocultará <div class="span4 hidden-phone"></div>

y esto div mostraré <div class="span8 visible-phone"></div>

Actualización

Respuesta anterior para Bootstrap 2.3

Ahora arranque 3 llegado en el mercado ..

así que actualizar mi respuesta para nuevo usuario → bootstrap3

en este dispositivo de teléfono div ocultará <div class="col-md-4 hidden-xs"></div>

y esto div mostrará <div class="col-xs-4 visible-xs"></div>

Answer 7

solo:

<div class="row-fluid"> 
    <div class="span4 hidden-desktop"></div> 
    <div class="span8"></div>  
</div> 

Answer 8

TLDR: use el segundo fragmento de código

Bootstrap es un primer framework móvil, así que lo explicaré desde el tamaño de pantalla más pequeño. El diseño siempre tiene 12 columnas de ancho independientemente de los puntos de corte/tamaño de pantalla.

A partir del punto de interrupción más pequeña (XS - extra de pequeños), la span4 se oculta y la span8 toma toda la anchura (las 12 columnas)

<div class="row-fluid"> 
    <div class="span4 hidden-xs"></div> 
    <div class="span8 col-xs-12"></div>  
</div> 

No somos todo hecho que no hemos' t comportamiento definido cuando se golpea el siguiente punto de interrupción (sm/pequeño/ancho de pantalla es más de 767px), así que haremos que span4 tome un tercio del ancho (12 columnas/3 = 4 columnas) y el span8 tomará el resto del ancho (12-4 = 8 columnas)

<div class="row-fluid"> 
    <div class="span4 hidden-xs col-sm-4"></div> 
    <div class="span8 col-xs-12 col-sm-8"></div>  
</div> 

Lo anterior supone que usted quería que el cambio ocurriera en el cambio entre los puntos de corte xs-sm.

Más información:

Si quería el cambio entre sm-MD (MD = medio) entonces podría utilizar la clase visible-md que mostrará el span4 en los puntos de interrupción de media y hacia arriba (> 992px)

<div class="row-fluid"> 
    <div class="span4 visible-md col-md-4"></div> 
    <div class="span8 col-xs-12 col-md-8"></div>  
</div>