Bootstrap 3 y 4 .container-fluid con rejilla que agrega relleno no deseado

Me gustaría que mi contenido sea fluida, pero cuando se utiliza .container-fluidcon rejilla de Bootstrap, todavía estoy viendo relleno. ¿Cómo puedo deshacerme del acolchado?

Veo que no obtengo el relleno con .row, pero quiero agregar columnas, y tan pronto como lo hago, el relleno vuelve: O.

Quiero poder usar las columnas en todo su ancho.

Un ejemplo:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

Solución que tengo:

Anular bootstrap.css, linke 1427 y 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

a

padding-right: 0px;
padding-left: 0px;

¡También debe agregar una "fila" a cada contenedor que "solucionará" este problema!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

Ver http://jsfiddle.net/3px20h6t/

Encuentre el CSS real de Bootstrap

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

Cuando agrega una .container-fluidclase, agrega un relleno horizontal de 15px, y el mismo se eliminará cuando agregue una .rowclase como elemento secundario por el margen negativo establecido en la fila.

Pasaron 5 años, y es bastante extraño que haya tantas respuestas que no siguen (o están en contra) las reglas de arranque o que en realidad no responden a la pregunta ...

Respuesta corta:
simplemente use la no-guttersclase de Bootstrap en su fila para eliminar el relleno:

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(También ha olvidado agregar </div>al final de su archivo. También está corregido en el código anterior)

Nota:

Hay casos en los que también desea quitar el relleno del contenedor. En este caso, considere descartar .containero .container-fluidclases según lo recomendado por la documentación .

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

Respuesta larga:

Los acolchados te en realidad se está documentado en Bootstrap de la documentación :

Las filas son envoltorios de columnas. Cada columna tiene un relleno horizontal (llamado canalón) para controlar el espacio entre ellas. Este relleno se contrarresta luego en las filas con márgenes negativos . De esta manera, todo el contenido de sus columnas se alinea visualmente en el lado izquierdo.

Y sobre la solución, que también se documentó:

Las columnas tienen relleno horizontal para crear los medianiles entre columnas individuales, sin embargo, puede eliminar el margen de las filas y el relleno de las columnas con .no- gutters en la fila.

Respecto a dejar caer el contenedor:

¿Necesita un diseño de borde a borde? Suelta el .container o .container-fluid principal.

Bono: sobre los errores encontrados en las otras respuestas

• Evite hackear las clases de contenedor de bootstrap en lugar de asegurarse de haber puesto todo el contenido en col-s y envuelto con row-s como dice la documentación :

En un diseño de cuadrícula, el contenido debe colocarse dentro de las columnas y solo las columnas pueden ser hijos inmediatos de las filas.

• Si aún tiene que piratear (en caso de que alguien ya haya estropeado las cosas y necesite solucionar rápidamente su problema), considere usar Bootstrap px-0para eliminar los rellenos horizontales pl-0 pr-0o reinventar sus estilos.

Creo que tenía el mismo requisito que Tim, pero ninguna de las respuestas proporciona una solución de 'columnas de borde a borde de la ventana gráfica con canalones internos normales'. U otra forma de decirlo: ¿cómo puedo hacer que mi primera y última columna se rompan en el relleno del contenedor y fluyan hacia el borde de la ventana gráfica, mientras sigo manteniendo las canaletas normales entre las columnas?

Por lo que puedo decir, no existe una solución limpia y ordenada. Esto es lo que funciona para mí, pero está fuera de todo lo que sea compatible con Bootstrap. Pero funciona por ahora (Bootstrap 3.3.5 y 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

HTML de muestra:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

CSS:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

El truco consiste en anidar un diventre la fila y las columnas para generar el margen adicional de -15px para empujar en el relleno del contenedor. El margen negativo adicional crea un desplazamiento horizontal (en espacios en blanco) en ventanas pequeñas. Se requiere agregar overflow-x: hiddena .rowpara suprimirlo.

Esto funciona igual .container-fluidque .container.

Así que aquí está el breve resumen de Bootstrap 4:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

Esto funciona para mi.

¿Por qué no anular el relleno agregado por el fluido del contenedor marcando el relleno izquierdo y derecho como 0?

<div class="container-fluid pl-0 pr-0">

aún mejor manera? sin relleno en absoluto al nivel del contenedor (limpiador)

<div class="container-fluid pl-0 pr-0">

Solo necesita estas propiedades CSS en la clase .container de Bootstrap y puede poner dentro de él el sistema de cuadrícula normal sin que alguien tenga contenido del contenedor fuera de él (sin scroll-x en la ventana gráfica).

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

En las nuevas versiones alfa, han introducido clases de espaciado de utilidades . La estructura se puede modificar si los usa de manera inteligente.

Clases de utilidad de espaciado

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0y pr-0eliminará el relleno inicial y final de las columnas. Un problema que queda son las filas incrustadas de una columna, ya que todavía tienen un margen negativo. En este caso:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

Diferencias de versión

También tenga en cuenta que las clases de espaciado de servicios públicos se cambiaron desde la versión 4.0.0-alpha.4. Antes de que fueran separados por 2 guiones por ejemplo => p-x-0e p-l-0Y así sucesivamente ...

Para permanecer en el tema de la versión 3: Esto es lo que uso en los proyectos de Bootstrap 3 e incluyo la configuración de la brújula, para esta utilidad de espaciado en particular, en bootstrap-sass(versión 3) o bootstrap(versión 4.0.0-alpha.3) con guiones dobles o bootstrap(versión 4.0.0-alpha.4 y posteriores) con guiones simples.

Además, las últimas versiones aumentan hasta 5 veces una proporción (por ejemplo, pt-5padding-top 5) en lugar de solo 3.

Brújula

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

Salida CSS

Por supuesto, siempre puede copiar / pegar las clases de espaciado de relleno solo desde un archivo css generado.

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

Creo que nadie ha dado la respuesta correcta a la pregunta. Mi solución de trabajo es: 1. Simplemente declare otra clase junto con el ejemplo de clase de fluido de contenedor (.maxx):

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

2. Luego, usando la especificidad en la parte css, haga esto:

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

Esto funcionará al 100% y eliminará el relleno de izquierda y derecha. Espero que esto ayude.

Si está trabajando con el configurador, puede establecer el @grid-gutter-widthdesde 30pxhasta0

Lo he usado <div class="container-fluid" style="padding: 0px !important"> y parece estar funcionando.

Yo mismo he estado luchando con esto y finalmente creo que lo he resuelto. Es increíble la cantidad de respuestas fallidas que hay en esta pregunta.

Todo lo que tienes que hacer es quitar el relleno de todos tus elementos .col y quitar el relleno también del .container-fluid.

Hice esto en mi propio proyecto un poco descuidadamente agregando lo siguiente a mi archivo css:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

Solo tengo los diferentes tamaños de col para dar cuenta de todos los diferentes tamaños de col que estoy usando. Estoy seguro de que hay una forma más limpia de escribir el CSS, pero esto ilustra el resultado final.

Úselo px-0en el containery no-guttersen el rowpara quitar los acolchados.

Citando de Bootstrap 4 - Sistema de cuadrícula :

Las filas son envoltorios de columnas. Cada columna tiene un relleno horizontal (llamado canalón) para controlar el espacio entre ellas. Este relleno se contrarresta luego en las filas con márgenes negativos. De esta manera, todo el contenido de sus columnas se alinea visualmente en el lado izquierdo.

Las columnas tienen relleno horizontal para crear los medianiles entre columnas individuales, sin embargo, puede eliminar el margen de las filas y el relleno de las columnas con .no-guttersen .row.

A continuación se muestra una demostración en vivo:

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

La razón por la que esto funciona es que container-fluidy colambos tienen el siguiente relleno:

padding-right: 15px;
padding-left: 15px;

px-0puede quitar el acolchado horizontal container-fluidy no-gutterspuede quitar el acolchado col.