twitter bootstrap 3 - sirve - Bootstrap 3: ¿configurar el ancho del contenedor a 940 px máximo para computadoras de escritorio?

que es la clase container

Question

Estoy agregando una sección completamente nueva a un sitio web usando Twitter Bootstrap 3, sin embargo, el contenedor no puede ir más allá de 940px en total para Desktop, ya que arrojará el encabezado y pie de página {includes}.

Así que 940 px funciona a 12 x 60 = 720 px para las columnas y 11 x 20 = 220 px para los canales. Muy bien, pero ¿cómo se ingresa esto en Bootstrap 3 ya que hay un campo / configuración ''no'' @ColumnWidth en la sección Personalizar?

Lo intenté configurando @ container-lg-desktop y @ container-desktop ambos en 940px, pero no funciona.

Answer 1

En primer lugar, considere la cuadrícula pequeña, consulte: http://getbootstrap.com/css/#grid-options . Un ancho máximo de contenedor de 750 px será demasiado pequeño para usted (también lea: ¿Por qué Bootstrap 3 fuerza el ancho del contenedor a ciertos tamaños? )

Al usar la cuadrícula pequeña, use consultas de medios para establecer el ancho máximo de contenedor:

@media (min-width: 768px) {.container {max-width: 750px; }}

Segundo, también lea esta pregunta: Bootstrap 3 - Rejilla de ancho 940px? ¿posible duplicado?

12 x 60 = 720 px para las columnas y 11 x 20 = 220 px

también habrá una canaleta de 20px en ambos lados de la rejilla así que 220 + 720 + 40 hacen 980px

hay ''no'' @ColumnWidth

El ancho de las columnas se calculará dinámicamente en función de su configuración en variables.less. puedes establecer @grid-columns y @grid-gutter-width . El ancho de una columna se establecerá como un porcentaje a través de grid.less en mixins.less:

.calc-grid(@index, @class, @type) when (@type = width) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}

update Set @ grid-gutter-width a 20px ;, contenedor-desktop: 940px ;, contenedor-large-desktop: @ contenedor-escritorio y recompilación de bootstrap.

Answer 2

Existe una solución mucho más sencilla (IMO) en Bootstrap 3 que no requiere que compile ningún LESS personalizado. Solo tiene que aprovechar la cascada en "Hojas de estilo en cascada".

Configure su carga de CSS así ...

<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/css/custom.css" />

Donde /css/custom.css son sus definiciones de estilo únicas. Dentro de ese archivo, agregue la siguiente definición ...

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

Esto anulará el width: 1170px predeterminado de Bootstrap width: 1170px configuración de width: 1170px cuando la ventana width: 1170px o mayor.

Probado en Bootstrap 3.0.2

Answer 3

La mejor opción es usar la versión LESS original de bootstrap (obtenerla de github).

Abra variables.less y busque // puntos de referencia de las consultas de medios

Encuentre este código y cambie el valor del punto de interrupción:

// Large screen / wide desktop
@screen-lg: 1200px; // change this
@screen-lg-desktop: @screen-lg;

Cambie a 9999px por ejemplo, y esto evitará que se llegue al punto de interrupción, por lo que su sitio siempre cargará la consulta de medios anterior que tiene un contenedor de 940 px.

Answer 4

Si no desea compilar bootstrap, copie lo siguiente e insértelo en su archivo css personalizado. No se recomienda cambiar el archivo bootstrap css original. Además, no podrá modificar el código original de arranque si lo está cargando desde un cdn.

Pegue esto en su archivo css personalizado:

@media (min-width:992px)
{
.container{width:960px}
}
@media (min-width:1200px)
{
.container{width:960px}
}

Estoy aquí configurando mi contenedor a 960px para cualquier cosa que pueda acomodarlo, y manteniendo el resto de los tamaños de los medios a los valores predeterminados. Puede establecerlo en 940px para este problema.

Answer 5

Si no funciona, utiliza "! Importante"

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