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


97

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;


1
¿Puede publicar su código relevante para que podamos adaptar nuestras respuestas a su código?
Simple Sandman

1
¡Actualizado con código! Quiero eliminar el relleno cuando tengo una columna, no solo cuando estoy usando una fila.
Tim

1
¡No es la solución correcta! Sugerí ir a la respuesta @part
Pooja Roy

Respuestas:


126

¡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/


3
Gracias. Lo que intento hacer es eliminar el relleno cuando uso columnas. ¿Alguna idea de cómo puedo hacer esto?
Tim

1
Eso solo es posible a través de una clase adicional ... He definido una clase llamada remove-padding que solo tiene un .remove-padding {padding-left: 0; padding-right: 0; margen izquierdo: 0; margin-right: 0} Hasta donde yo sé, no hay una clase predefinida para eliminar el relleno predeterminado de 15px
PARTE

27
No puedo darme cuenta de cómo esta respuesta tiene tantos votos a favor, mientras que no sigue las pautas del sistema Bootstrap Grid. La tercera regla de la sección Introducción establece que "el contenido debe colocarse dentro de las columnas y solo las columnas pueden ser elementos secundarios inmediatos de las filas". La respuesta de Lucas Nelson proporciona un enfoque justo para lograr el efecto deseado sin romper la regla de sintaxis.
Siavas

También puede usar la rowclase directamente con las col-**-*clases si su diseño se adapta.
Anwar

2
¿Cómo se puede votar 87 veces (y contando) cuando no responde a la pregunta? La pregunta establece que funciona cuando solo rowse usa a ... pero no cuando se usan columnas (para lo cual ese hecho se ignora en esta respuesta). De todos modos, obtengo exactamente el mismo relleno erróneo de 15px que se describe en la pregunta y es muy frustrante.
Jeach

32

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.


3
Gracias un montón. Sin embargo, me gustaría eliminarlo cuando estoy usando una columna. Realmente no quiero meterme con el CSS de arranque básico. Sospecho que debe haber una forma autorizada de hacer esto. ¿Alguna idea?
Tim

1
Si desea utilizar la columna en ancho completo, puede aplicar col-md-12 col-sm-12 css dentro de la fila
Kishore Kumar

2
Gracias. Intenté eso, pero todavía obtengo relleno. Además, necesito dos columnas. ¿Me estoy perdiendo de algo?
Tim

1
El relleno que está viendo es predeterminado de Bootstrap, si desea deshacerse de él, cómo tener que agregar su propia clase. Cuando agrega una nueva clase y desea anular el bootstrap, puede agregar! Important después del estilo.
Kishore Kumar

1
Si hay dos columnas, puede agregar esta clase a su columna col-md-6
Kishore Kumar

26

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.

3
.container-fluidaún contiene padding-right: 15pxy padding-left: 15px, lo que significa que aún no podrá alinearse con la ventana usando su método. Todavía necesitaría hacer algo como container-fluid px-0.
lightyrs

2
En ese caso, la documentación recomienda simplemente "Eliminar el .container o .container-fluid principal". . También he incluido eso en la respuesta.
Just Shadow

14

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?

filas de ancho completo

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.


por qué no solo.full-width-row > div { padding: 0; }
Bamieh

No funciona, todavía tiene un canalón al principio y al final de la fila: bootply.com/eM8y3kkfbi
Lucas Nelson

13

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.


Para Bootstrap 4, esta es la respuesta correcta y la mejor práctica.
Syafiq Freman

2
@SyafiqZainal, y también es un duplicado de mi respuesta original a continuación (publicada mucho antes): D Entonces, ahora me pregunto si está bien publicar la misma respuesta en StackOverflow.
Just Shadow

6

¿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">


4
pl-0 pr-0se puede cambiar apx-0
Patrick McDonald

3

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;
}

3

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; }

2

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>

  1. 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.


2
¿Qué tal si px-0configuramos el relleno izquierdo y derecho para Bootstrap 4
Vincent Liong

1

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


1

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


2
podría evitar el estilo y en su lugar agregar la clase de utilidadp-0
iCrus

0

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.


0

Ú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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.