html - rejillas - Establecer el ancho máximo para el cuerpo usando Bootstrap

tabla responsive bootstrap

Question

Construyendo mi primer sitio con Twitter Bootstrap y experimentando con diseños fluidos. He configurado mi contenedor para que sea fluido, ahora el contenido interno ocupa todo el ancho de la página y se adapta para cambiar el tamaño del navegador.

El diseño en el que estoy trabajando fue creado para un ancho máximo de ~ 950px.

Revisé variables.less y responsive.less , y la documentación de Bootstrap, no puedo entender cómo hacer que esto suceda. También intenté agregar lo siguiente a mi style.css :

body {
    max-width: 950px;
}

Answer 1

Desafortunadamente, ninguno de los anteriores resolvió el problema para mí.

No quería editar el archivo bootstrap-responsive.css así que fui de la manera más fácil:

1. Crea un CSS con prioridad sobre bootstrap-responsive.css
2. Copie todo el contenido de @media (min-width: 768px) and (max-width: 979px) (línea 461 con la última versión de arranque 2.3.1 a día de hoy)
3. Pégalo en tu CSS de alta prioridad
4. En su CSS, ponga @media (min-width: 979px) en el lugar donde dice @media (min-width: 768px) and (max-width: 979px) before. Esto establece el estilo de 768 a 979 a todo por encima de 768.

Eso es. No es óptimo, habrá duplicado css, ¡pero funciona 100% perfecto!

Answer 2

En responsive.less, puede comentar la línea que importa responsive-1200px-min.less.

// Large desktops

@import "responsive-1200px-min.less";

Al igual que:

// Large desktops

// @import "responsive-1200px-min.less";

Answer 3

No sé si esto fue señalado aquí. La configuración para .container width debe establecerse en el sitio web de Bootstrap. Personalmente no tuve que editar o tocar nada dentro de los archivos CSS para sintonizar mi tamaño de .container que es 1600px. En la pestaña Personalizar, hay tres secciones responsables de los medios y la capacidad de respuesta de la web:

• Media consulta puntos de interrupción
• Sistema de red
• Tamaños de contenedores

Además de los puntos de interrupción de Media , a los que me refiero la mayoría de la gente, también cambié @container-desktop a (1130px + @grid-gutter-width) y @container-large-desktop a (1530px + @grid-gutter-width) Ahora, el .container cambia su ancho si mi navegador se escala a ~ 1600px y ~ 1200px. Espero que pueda ayudar.

Answer 4

No tiene que modificar la respuesta de arranque eliminando @media (max-width:1200px) ...

Mi aplicación tiene un max-width de 1600 px. Así es como funcionó para mí:

1. Crear bootstrap-custom.css: en la medida de lo posible, no quiero anular mi bootstrap css original.

2. Dentro de bootstrap-custom.css, anule el fluido contenedor incluyendo este código:

Me gusta esto:

/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

Answer 5

Editar

Una mejor manera de hacer esto es

1. crea tu propio archivo menos como archivo principal menos (como bootstrap.less).

2. Importe todos los archivos bootstrap less que necesite. (en este caso, solo necesita importar todos los archivos que responden menos pero responde-1200px-min.less)

3. Si necesita modificar algo en el archivo original bootstrap less, solo necesita escribir su propio número para sobrescribir el código menos bootstrap. (Solo recuerde poner su menos código / archivo después de @import {bootstrap''s less file};).

Original

Tengo el mismo problema. Así es como lo arreglé.

Encuentra la consulta de medios.

@media (max-width:1200px) ...

Eliminarlo (Me refiero a todo, no solo a @media (max-width:1200px) )

Dado que el ancho predeterminado de Bootstrap es 940px, no necesita hacer nada.

Si desea tener su propio ancho máximo, simplemente modifique la regla css en la consulta de medios que coincida con su ancho deseado.