Bootstrap: ¿cómo cambio el ancho del contenedor?

125

He usado Twitter Bootstrap para desarrollar un sitio web con la clase de contenedor fijo, pero ahora el cliente quiere que el sitio web tenga 1000px de ancho y no 1170px. No uso los archivos .less.

¿Hay alguna forma rápida de arreglar esto?

twitter-bootstrap

— alex
fuente

Consulte la respuesta aquí , creo que su problema será resuelto por el violín de solo fijo en esa respuesta.

— prem

@prem, tx pero no entiendo el ejemplo ya que no usa ninguna de las clases de bootstrap como span's o container. Todo lo que creo que necesito para este proyecto es establecer el máximo del contenedor en 940 px con el bootstrap receptivo.

— alex

75

Vaya a la sección Personalizar en el sitio Bootstrap y elija el tamaño que prefiera. Tendrás que configurar @gridColumnWidthy @gridGutterWidthvariables.

Por ejemplo: @gridColumnWidth = 65pxy @gridGutterWidth = 20pxresultados en un 1000pxdiseño.

Entonces descárgalo.

— albertedevigo
fuente

no se puede llegar al contenedor exacto de 1000 px cambiando las variables gridColumnWidth y gridGutterWidth ... porque (12 * (gridColumnWidth) + 12 (gridGutterWidth)) no es igual a 1000. Y así que solo di esa solución. ¿Es eso correcto?

— prem

15

Teóricamente, hay infinitas combinaciones que coinciden con 1000px. Un ejemplo: 12 * 65 + 11 * 20 = 1000 (solo hay 11 canales entre columnas).

— albertedevigo

eh! Realmente no reconocí la cosa simple ... de todos modos, la suya fue la solución adecuada.

— prem

Gracias por tu publicación, fue útil;) Solo una nota: prácticamente habría exactamente 7 soluciones usando píxeles completos para un ancho de 1000px. (anchos de columna 10, 21, 32, 43, 54, 65 y 76)

— dfherr

@dfherr No sé a qué te refieres exactamente cuando dices "prácticamente", pero ten en cuenta que CSS admite valores decimales para píxeles. Por lo tanto, hay infinitas soluciones. w3.org/TR/CSS21/syndata.html#length-units

— albertedevigo

229

Aquí está la solución:

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

La ventaja de hacer esto, en lugar de personalizar Bootstrap como en la respuesta de @ Bastardo , es que no cambia el archivo Bootstrap. Por ejemplo, si usa un CDN, aún puede descargar la mayor parte de Bootstrap desde el CDN.

— mcbjam
fuente

10

La mayoría de las respuestas descuidan CDN. Tu respuesta es una solución perfecta.

— Charles Watson el

2

Es perfecto para las personas que usan CDN. Modificar el MENOS (cuando llega el 4, el SASS) en el momento de la compilación es perfecto para las personas que alojan su propio CSS Bootstrap. Sin embargo, la modificación de un MENOS personalizado (o SASS) importado después del proporcionado significa que puede actualizar el MENOS subyacente sin (generalmente) hacer una diferencia.

— Greg Pettit

2

Sé que esto es realmente tarde, pero los contenedores dados tienden a ser más grandes ahora si agrega ancho: automático al código anterior, puede hacer que los contenedores sean más grandes que su 1170 máx.

— Rick Calder

Es lo que estaba buscando. Gracias.

— tedebus

20

Está atando uno que tenía a sus espaldas diciendo que no usará los MENOS archivos. Creé mi primer tema de Twitter Bootstrap usando 2.0, e hice todo en CSS, creando un archivo override.css. Tomó días para que las cosas funcionen correctamente.

Ahora tenemos 3.0. Permíteme asegurarte que toma menos tiempo aprender MENOS, lo cual es bastante sencillo si te sientes cómodo con CSS, que hacer todas esas anulaciones de CSS locas. Hacer cambios como el que quieres es pan comido.

En Bootstrap 3.0, la clase contenedor controla el ancho, y todos los estilos contenidos se ajustan para llenar el contenedor. Las variables de ancho del contenedor están en la parte inferior del archivo variables.less.

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

Algunos sitios no tienen suficiente contenido para llenar la pantalla 1020 o desea un marco más estrecho por razones estéticas. Como BS usa una cuadrícula de 12 columnas, uso un múltiplo como 960.

— Bastardo Sucio
fuente

44

Funciona, pero: nombres de las variables son @container-sm, @container-mdy @container-lg(ahora)

— Andreas Dolk

1

@Bastardo buen nombre +1

— Ömer Un

18

@mcbjam ya dio esta respuesta, pero aquí hay una explicación un poco más.

Puede realizar el cambio fácilmente mediante una consulta de medios en su archivo CSS sin descargar BS. Acabo de hacer esto y funciona muy bien.

El valor de "ancho mínimo" de la consulta de medios le indicará a CSS que cambie el ancho de su contenedor a 1000px solo en pantallas de más de 1200px (o el ancho que elija incluir allí). Esto preserva la capacidad de respuesta de su sitio, por lo que cuando el tamaño de la pantalla salte por debajo de ese valor (monitor más pequeño, tableta, teléfono inteligente, etc.), su sitio aún se ajustará para adaptarse a las pantallas más pequeñas.

@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}

— Jeff Schwarting
fuente

13

Para bootstrap 4 si está usando Sass, aquí está la variable para editar

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Para anular esta variable, declare $ container-max-widths sin el! Default en mi archivo .sass antes de importar bootstrap.

Nota: solo necesitaba cambiar el valor xl, así que no me importó pensar en puntos de interrupción.

— Kaizoku Gambare
fuente

12

Establezca su propia clase de contenedor de contenido con una propiedad de ancho de 1000 px y luego use la clase boostrap de contenedor-fluido en lugar de contenedor.

Funciona pero podría no ser la mejor solución.

— Geo
fuente

6

Use un selector de contenedor y cree un contenedor que tenga un ancho del 100% dentro de ese contenedor para encapsular toda la página.

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

Ahora el ancho máximo está establecido en 1000 px y no necesita menos o sass.

— Larry Judd
fuente

0

Tamaños de contenedores

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

en la sección Tamaños de contenedores, cambie 1140a970

Espero que sea de ayuda.

gracias por tu correcta enlace para personalizar bootstrap: https://getbootstrap.com/docs/3.4/customize/

— Entonces santo
fuente

-3

Agregue estas piezas de CSS en su estilo CSS. Es mejor agregar esto después de agregar el archivo bootstrap css para sobrescribirlo.

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`

— Mahendra
fuente