Rejilla Bootstrap 3 de Twitter, cambio de punto de corte y eliminación de relleno

Intento moverme a la nueva grilla Boostrap 3 y estoy enfrentando algunas dificultades.

  1. ¿Cómo hacer que la grilla se acumule por debajo de 480px, pero no entre 480px y 768px?
  2. por encima de 768px el relleno a la izquierda del primero y el relleno a la derecha están fuera del contenedor, pero debajo de 768px el relleno está dentro del contenedor por lo que el aspecto es diferente porque el contenido no está más alineado con un contenedor que podría estar arriba.
  3. cuando la cuadrícula se acumula, el relleno permanece pero para mí debe estar en 0.

Cualquier ayuda sería bienvenida Estoy usando el siguiente código con bootstrap 3 RC1

container

actualización enero de 2014

Ver también: https://github.com/twbs/bootstrap/issues/10203

actualización 21 aug. 2013 Desde Twitter Bootstrap 3 RC2, el col * mencionado a continuación ha sido rebautizado como xs-col- * Ahora hay cuatro clases de cuadrícula: xs-col- * (móvil, nunca astack), col-sm- * (tableta , stacks inferiores a 768px), col-md- * (laptops, stacks inferiores a 992 px) y col-lg- * (desktop, stacks below 1200px).

actualización En mi respuesta anterior utilizo esta tabla de los documentos recientes:

[imagen antigua eliminada]

Cuando pruebo estos valores si encuentro algo diferente:

Bootstrap 3 Grid

  • “col-xs- *” se aplicará siempre (nunca se acumula)
  • “col-sm- *” se aplicará entre 768 y superior (992px) (stacks a 767)
  • “col-lg- *” se aplicará entre 992 y superior (stacks en 991)

En variables.less encontrarás:

 // Media queries breakpoints // -------------------------------------------------- // Tiny screen / phone @screen-tiny: 480px; @screen-phone: @screen-tiny; // Small screen / tablet @screen-small: 768px; @screen-tablet: @screen-small; // Medium screen / desktop @screen-medium: 992px; @screen-desktop: @screen-medium; 

Pero no parece haber un punto de interrupción a 480px (o como @fred_ dice que a la grilla le falta el conjunto de clases col-ts- * (pequeño a pequeño)). Ver también: https://github.com/twbs/bootstrap/issues/9746

Para establecer el punto de astackmiento a 480px, deberá recomstackr el suyo css. Establecer @ screen-small en 480px; y defina sus cols con:

después de eso. Tenga en cuenta que esto cambiará @ grid-float-breakpoint también porque se define como @grid-float-breakpoint: @screen-tablet; .

Al agregar una fila al contenedor, no encuentro problemas con el relleno.

O intente: http://www.bootply.com/70212 se astackrá debajo de 480px al agregar una consulta de medios (el javascript se usa solo para ilustración)

respuesta anterior

A partir de ahora, Bootstrap de Twitter define tres cuadrículas: cuadrícula pequeña para teléfonos (<480px), cuadrícula pequeña para tabletas (<768px) y la cuadrícula mediana-grande para Destkops (> 768px). Los prefijos de clase de fila para estas cuadrículas son “.col-“, “.col-sm-” y “.col-lg-“. La cuadrícula Mediana-grande se astackrá debajo del ancho de la pantalla de 768 píxeles. También lo hace la cuadrícula pequeña por debajo de 480 píxeles y la cuadrícula pequeña nunca se astack.

Con su prefijo “col-4” la cuadrícula nunca se astackrá. Por lo tanto, elimine “col-4” para dejar que su cuadrícula se acumule por debajo de 480px. Esto también eliminará la causa de relleno ahora.

Ver también: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ y Escribir Bootstrap en Twitter con la actualización a v3 en mente

  1. Use la clase .col-ts-12 para todos los divs 100% por debajo de 480px y coloque este código al final de bootstrap.css:

     @media (max-width: 480px) { .col-ts-12 { float: none; } } 

Para implementar cualquier cambio para dispositivos pequeños a pequeños, deberá incluir sus propias consultas de medios para agregar sus propios puntos de interrupción adicionales.

Por ejemplo:

 @media (max-width: 480px) { .no-float { display:block; float:none; padding:0; } } 

No estoy muy seguro de lo que está intentando lograr con esto, pero así es como aplicaría estilos en los que el ancho de la pantalla sea inferior a 480 px.