twitter bootstrap - color - Cómo usar bootstrap con 16 o 24 columnas
layout bootstrap (10)
Necesito ayuda para configurar bootstrap 2.0.4 para que sea de 16 o 24 columnas en lugar de las 12 columnas predeterminadas No puedo entender qué estoy haciendo mal. Probé la opción de personalización en el sitio de arranque e intenté cambiar las variables de cuadrícula en las variables. .less file y recompilación de bootstrap.less utilizando Crunch, pero para ambos ensayos todavía tengo el mismo resultado. ¡Todavía son 12 columnas! cuando trato de configurar un div para que sea span12, ¿todavía toma toda la pantalla?
¿Alguien puede guiarme a lo que está mal que estoy haciendo o si alguien puede generar una versión de 16 y 24 columnas y enviarme a mí que sería perfecto
Aquí hay una manera rápida y fácil de hacer 16 columnas usando nesting ...
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
<div class="row">
<div class="col-md-3 no-padding">
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
</div>
<div class="col-md-3 no-padding">
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
</div>
<div class="col-md-3 no-padding">
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
</div>
<div class="col-md-3 no-padding">
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
<div class="col-md-3">
col
</div>
</div>
</div>
<!-- row -->
Este método es para una versión anterior de Bootstrap - Versión 2.3.1
Haga clic en este enlace para personalizar bootstrap: http://twitter.github.com/bootstrap/customize.html
Encontrará ejemplos como este. Cambia los parámetros para que se ajusten a tus necesidades.
16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px
16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px
24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px
24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px
Lo suficientemente simple como para alterar en menos - http://twitter.github.com/bootstrap/scaffolding.html#gridCustomization
Deseará cambiar las variables allí a lo que quiera -
p.ej
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px
Si usa una rejilla de fluido, también querrá cambiar estas variables proporcionalmente, de lo contrario span12 todavía ocupará el 100% del ancho y span24 ocupará el 200%
@fluidGridColumnWidth
@fluidGridGutterWidth
Como se dijo:
Cómo personalizar
Modificar la grilla significa cambiar las tres variables @ grid * y recompilar Bootstrap. Cambie las variables de grilla en variables.less y use una de las cuatro formas documentadas para recompilar. Si agrega más columnas, asegúrese de agregar el CSS para aquellos en grid.less.
Puede cambiar las variables y descargar el nuevo CSS aquí: http://twitter.github.com/bootstrap/download.html#variables
Aquí hay un ejemplo compilado que debería funcionar para 16 columnas (no lo he probado, hágamelo saber cómo funciona): https://s3.amazonaws.com/intenex/bootstrap16columns.zip
Para 24 columnas puedes dividir div principal
<div class="col-md-12">
<div class="col-md-6">
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
<div class="col-md-1">nothing</div>
</div>
<div class="col-md-6">12 here</div>
</div>
Puede anular el atributo de ancho con un porcentaje como este:
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
<div class="col-md-1" style="width: 6.25%">nothing</div>
Incluso mantendrá las capacidades de respuesta.
Utilizo Grid 30 columnas para mi proyecto (Grid 24 y 100 también están disponibles)
https://github.com/zirafa/bootstrap-grid-only
es posible que se requiera cierta personalización dependiendo de su requerimiento
16 Columna
960px
45px * 16 = 720 Columna
15px * 16 = 240 Canal
1200px
53px * 16 = 848 Columna
22px * 16 = 352 Canal
768px
33px * 16 = 528 Columna
15px * 16 = 240 Canal
Actualizado 2018
Revisando esta pregunta para el último Bootstrap 4. Ahora que Bootstrap 4 es flexbox e incluye columnas de diseño automático , es fácil crear diseños con cualquier cantidad de n columnas ...
16 columnas
<div class="row">
<div class="col">
1
</div>
<div class="col">
2
</div>
<div class="col">
... to 16
</div>
</div>
24 columnas
<div class="row">
<div class="col">
1
</div>
<div class="col">
2
</div>
<div class="col">
... to 24
</div>
</div>
Demostración: https://www.codeply.com/go/4sQGt2qKyr
Ver también: N número de columnas en Bootstrap 4
Editar: Se ha restaurado la creación de cuadrículas con una cantidad personalizada de columnas, y se puede hacer en la página de personalización de Bootstrap.
Por razones desconocidas para mí, la última versión de Bootstrap (3.0.0 / 1) no le permite crear grillas de más de 12 columnas, lo cual es una gran lástima.
Lo que podemos hacer actualmente, y que a su vez permitirá crear paquetes de arranque más personalizados, es configurar su propio personalizador de Bootstrap.
Editar: Acabo de intentarlo. La instalación de todas las dependencias fue bastante sencilla y se atuvo a las directrices en su página Docs GitHub.
Ejemplo generado 24 rejilla de columna
Editor required inserting some code along with jsfiddle link. There''s no point in pasting anything though.
Establecer 24 columnas:
960
Columna de 35 píxeles
Canal 5px
1200
Columna de 40 píxeles
Canal 10px
768
Columna 29px
3px Gutter