0

De forma estandar el container de bootstrap 4 tiene un máximo de 1,140px. Cómo hago para que el ancho máximo del container sea de 1,280px (80rem)? Y como hacer los ajustes para que el grid sea siempre porcentual pero con respecto al nuevo valor del container? Espero haberme explicado. Alguna idea?

2 respuestas 2

2

Una de las cosas buenas que tiene Bootstrap es que el grid no trabaja con medidas fijas, si no con relativas al padre que contiene a los elementos. De esta manera, si cambiases el tamaño del container, su funcionamiento, en principio, no se vería afectado.

Hay muchas maneras de cambiar el tamaño del container, yo quisiera recomendarte dos:

  • Puedes optar por cambiar el núcleo CSS de Bootstrap "bootstrap.min.css" ahí se especifican todas las reglas CSS que hacen que Bootstrap funcione.

  • También puedes crear una regla específica en tus propios CSS que pise la establecida por Bootstrap. Ejemplo:

CSS

#miSection .container {
    width: 1280px !important;
}

Personalmente, me quedaría con la segunda. Ya que me gusta evitar tocar los núcleos de las librerías y plugins si está en mi mano.

3
  • Estimado PHPMyguel, implementé la segunda opción: <div id="myheader" class="container"> </div> y al final de mi hoja de estilo personalizada: #myheader .container { width: 1280px !important; } Eliminé la caché, y recargué la web, pero no veo cambios. Igualmente limpié la caché de wordpress que carga el template de bootstrap, pero no hay cambios. Se me pasó algo? el 17 sep. 2018 a las 21:07
  • Con la regla CSS que has planteado: #myheader .container { width: 1280px !important; } Estás diciendo que le des el width 1280px al elemento de la clase container cuyo padre tenga la id myheader. Cosa que en un HTML no se cumple. Si quisieras hacerlo funcionar con el HTML que me has puesto, deberías quitar el espacio entre elementos dentro de tu regla CSS, quedando algo como esto. #myheader.container { width: 1280px !important; } Con esta regla que te pongo, estás diciendo que quieres darle el CSS al elemento con clase container y que además tenga la id myheader.
    – phpMyGuel
    el 17 sep. 2018 a las 22:57
  • Bárbaro, ya lo implementé. Muy agradecido. el 19 sep. 2018 a las 3:29
0

Estimado, encontré una idea genial y me funciona perfecto sin tener que tocar bootstrap:

<div class="container-fluid">
	<div id="mycontainer" class="container">
    </div>
</div>

Hoja de estilo:

#mycontainer {
    max-width: 1280px !important;
}

1
  • Esa solución es la que te venía comentando. Seleccionar el container dentro del section o div o lo que tengas como padre. Lo de meter un container-fluid dentro de un container no es una buena practica. Se suele usar o lo uno o lo otro.
    – phpMyGuel
    el 17 sep. 2018 a las 22:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.