css - cards - container fluid bootstrap
Fluid Container en Bootstrap 3 (5)
¿Cómo hacer un contenedor de fluido en bootstrap 3?
En bootstrap 2.3.2 .container-fluid clase de .container-fluid está ahí. Pero ahora en bootstrap 3 falta y solo hay .container class. Por favor, ayúdame.
Aquí hay buenas respuestas, así que trataré de evitar que mi ser repita con mis siguientes puntos sobre el tema:
- .container-fluid se eliminó en 3.0 pero ahora está de vuelta en 3.4 (esta información es en respuesta pero quería ponerla en respuesta)
- Para obtener la última versión, vaya here o use Nuget.
- Las filas deben colocarse dentro de un contenedor. (Ancho fijo) o .container-fluido (ancho completo) para una alineación y relleno correctos.
- Para obtener la información más reciente sobre el contenedor, por favor vaya aquí para Bootstrap CSS
Bootstrap 3.0 se movió a un enfoque "móvil primero". .container solo está realmente allí en los casos en que necesitas / quieres un diseño cuadrado. pero, si exime por div.container-fluid el div.container-fluid , se queda con un diseño fluido por defecto.
por ejemplo, para tener un diseño fluido de dos columnas, simplemente use:
<body>
<header>...</header>
<div style="padding:0 15px;"><!-- offset row negative padding -->
<div class="row">
<div class="col-md-6">50%</div>
<div class="col-md-6">50%</div>
</div>
</div>
<footer>...</footer>
</body>
El .container-fluid fue reemplazado por .container en Bootstrap 3.x ( http://getbootstrap.com/getting-started/#migration ), por lo que el .container es fluido , pero no tiene el ancho completo.
Puede usar la row como contenedor de fluido, pero debe ajustarla un poco para evitar una barra de desplazamiento horizontal. Extracto de los documentos ( http://getbootstrap.com/css/#grid ) ..
"Las personas que buscan crear diseños totalmente fluidos (es decir, su sitio se extiende por todo el ancho de la ventana gráfica) deben envolver su contenido de cuadrícula en un elemento contenedor con relleno: 0 15px; para compensar el margen: 0 -15px; utilizado en .rows".
Más sobre los cambios en 3.x: http://bootply.com/bootstrap-3-migration-guide
Demostración: http://bootply.com/91948
ACTUALIZACIÓN para Bootstrap 3.1
container-fluid ha vuelto nuevamente en Bootstrap 3.1. Ahora container-fluid puede usarse para crear un diseño de ancho completo: http://www.bootply.com/116382
Esto fue introducido en v3.1.0: http://getbootstrap.com/css/#grid-example-fluid
Commit #62736046 añadió "variación de fluido contenedor para contenedores y diseños de ancho completo".
Simplemente configuro la siguiente regla CSS donde cualquier fila que sea hija de container-fluid ya no tendrá un margen negativo que compensa el sistema de grillas.
.container-fluid > .row {
margin-left: 0;
}
Voy a probar más para ver si esto crea algún problema con otros diseños de cuadrícula de ancho fijo.