css - quitar - Eliminar el relleno de las columnas en Bootstrap 3

padding bootstrap 3 (23)

A veces puede perder el relleno que desea para las columnas. Terminan pegándose el uno al otro. Para evitar eso, puede actualizar la clase de la siguiente manera:

<div class="col-md-3 NoPaddingForChildren"> <div class="col-md-6"> <label>Id</label> <input ng-model="ID" class="form-control"> </div> <div class="col-md-6"> <label>Value</label> <input ng-model="Val" class="form-control"> </div> </div>

y la clase correspondiente:

.NoPaddingForChildren > div:not(:first-child):not(:last-child) { padding-left: 0; padding-right: 0; } .NoPaddingForChildren > div:first-child { padding-left: 0; } .NoPaddingForChildren > div:last-child { padding-right: 0; }

Problema:

Elimine el relleno / margen a la derecha e izquierda de col-md- * en Bootstrap 3.

Código HTML:

<div class="col-md-12"> <h2>OntoExplorer<span style="color:#b92429">.</span></h2> <div class="col-md-4"> <div class="widget"> <div class="widget-header"> <h3>Dimensions</h3> </div> <div class="widget-content" id=""> <div id=''jqxWidget''> <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div> <div style="clear:both;" id="listBoxB"></div> </div> </div> </div> </div> <div class="col-md-8"> <div class="widget"> <div class="widget-header"> <h3>Results</h3> </div> <div class="widget-content"> <div id="map_canvas" style="height: 362px;"></div> </div> </div> </div> </div>

Salida deseada:

Actualmente este código agrega relleno / margen a la derecha e izquierda de las dos columnas. Me pregunto qué es lo que me falta para eliminar este espacio extra en los lados.

Darse cuenta:

Si elimino "col-md-4", ambas columnas se expanden al 100%, pero quiero que estén una al lado de la otra.

Bootstrap tiene la clase .no-gutters que puede agregar al elemento row.

<div class="container-fluid"> <div class="row no-gutters"> <div class="col-md-12"> [YOUR CONTENT HERE] </div> </div> </div>

Referencia: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Construyendo sobre la respuesta de Vitaliy Silin . Cubriendo no solo los casos en los que no queremos rellenos en absoluto, sino también los casos en los que tenemos rellenos de tamaño estándar.

Vea la conversión en vivo de este código a CSS en sassmeister.com

@mixin padding($side, $size) { $padding-size : 0; @if $size == ''xs'' { $padding-size : 5px; } @else if $size == ''s'' { $padding-size : 10px; } @else if $size == ''m'' { $padding-size : 15px; } @else if $size == ''l'' { $padding-size : 20px; } @if $side == ''all'' { .padding--#{$size} { padding: $padding-size !important; } } @else { .padding-#{$side}--#{$size} { padding-#{$side}: $padding-size !important; } } } $sides-list: all top right bottom left; $sizes-list: none xs s m l; @each $current-side in $sides-list { @each $current-size in $sizes-list { @include padding($current-side,$current-size); } }

Esto entonces produce:

.padding--none { padding: 0 !important; } .padding--xs { padding: 5px !important; } .padding--s { padding: 10px !important; } .padding--m { padding: 15px !important; } .padding--l { padding: 20px !important; } .padding-top--none { padding-top: 0 !important; } .padding-top--xs { padding-top: 5px !important; } .padding-top--s { padding-top: 10px !important; } .padding-top--m { padding-top: 15px !important; } .padding-top--l { padding-top: 20px !important; } .padding-right--none { padding-right: 0 !important; } .padding-right--xs { padding-right: 5px !important; } .padding-right--s { padding-right: 10px !important; } .padding-right--m { padding-right: 15px !important; } .padding-right--l { padding-right: 20px !important; } .padding-bottom--none { padding-bottom: 0 !important; } .padding-bottom--xs { padding-bottom: 5px !important; } .padding-bottom--s { padding-bottom: 10px !important; } .padding-bottom--m { padding-bottom: 15px !important; } .padding-bottom--l { padding-bottom: 20px !important; } .padding-left--none { padding-left: 0 !important; } .padding-left--xs { padding-left: 5px !important; } .padding-left--s { padding-left: 10px !important; } .padding-left--m { padding-left: 15px !important; } .padding-left--l { padding-left: 20px !important; }

Eliminar / personalizar Bootstrap Gutter con referencia css: http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

/* remove */ .gutter-0.row { margin-right: -0px; margin-left: -0px; } .gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] { padding-right: 0px; padding-left: 0px; } /* customize */ .gutter-6.row { margin-right: -3px; margin-left: -3px; } .gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] { padding-right: 3px; padding-left: 3px; }

Elimine el espaciado de las columnas b / w utilizando bootstrap 3.7.7 o menos.

.no-gutter es una clase personalizada

.no-gutter > [class*=''col-''] { padding-right:0; padding-left:0; }

En adelante solo disponible en Bootstrap4

<div class="p-0 m-0"> </div>

nota: .p-0 y .m-0 ya han agregado bootstrap.css

Envuelve tus columnas en un .row y agrega a ese div una clase llamada "no-gutter"

<div class="container"> <div class="row no-gutter"> <h2>OntoExplorer<span style="color:#b92429">.</span></h2> <div class="col-md-4"> <div class="widget"> <div class="widget-header"> <h3>Dimensions</h3> </div> <div class="widget-content"> </div> </div> </div> <div class="col-md-8"> <div class="widget"> <div class="widget-header"> <h3>Results</h3> </div> <div class="widget-content"> </div> </div> </div> </div>

Luego pega el contenido debajo de tu archivo CSS

.row.no-gutter { margin-left: 0; margin-right: 0; } .row.no-gutter [class*=''col-'']:not(:first-child), .row.no-gutter [class*=''col-'']:not(:last-child) { padding-right: 0; padding-left: 0; }

Específicamente para la mezcla SASS:

@mixin no-padding($side) { @if $side == ''all'' { .no-padding { padding: 0 !important; } } @else { .no-padding-#{$side} { padding-#{$side}: 0 !important; } } } @include no-padding("left"); @include no-padding("right"); @include no-padding("top"); @include no-padding("bottom"); @include no-padding("all");

Luego en HTML, puedes usar

.no-padding-left .no-padding-right .no-padding-bottom .no-padding-top .no-padding - to remove padding from all sides

Claro, puedes @incluir solo aquellas declaraciones que necesites.

Ninguna de las soluciones anteriores funcionó perfectamente para mí. Después de esta respuesta , pude crear algo que me funcionó. Aquí también estoy usando una consulta de medios para limitar esto solo a pantallas pequeñas.

@media (max-width: @screen-sm) { [class*="col-"] { padding-left: 0; padding-right: 0; } .row { margin-left: 0; margin-right: 0; } .container-fluid { margin: 0; padding: 0; } }

Normalmente usaría .row para envolver dos columnas, no .col-md-12 , es una columna que encierra otra columna. Después de todo, .row no tiene los márgenes y el relleno adicionales que traería un col-md-12 y también descuenta el espacio que una columna introduciría con los márgenes izquierdo y derecho negativos.

<div class="container"> <div class="row"> <h2>OntoExplorer<span style="color:#b92429">.</span></h2> <div class="col-md-4 nopadding"> <div class="widget"> <div class="widget-header"> <h3>Dimensions</h3> </div> <div class="widget-content"> </div> </div> </div> <div class="col-md-8 nopadding"> <div class="widget"> <div class="widget-header"> <h3>Results</h3> </div> <div class="widget-content"> </div> </div> </div> </div> </div>

Si realmente desea eliminar el relleno / márgenes, agregue una clase para filtrar los márgenes / rellenos para cada columna secundaria.

.nopadding { padding: 0 !important; margin: 0 !important; }

Otra solución, factible solo si compila bootstrap desde sus fuentes LESS, es redefinir la variable que establece el relleno para las columnas.

Encontrará la variable en el archivo variables.less : se llama @grid-gutter-width .

Se describe así en las fuentes:

//** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px;

Establezca esto en 0, compile bootstrap.less e incluya el bootstrap.css resultante. Estás listo. Puede ser una alternativa a la definición de una regla adicional, si ya está utilizando fuentes bootstrap como yo.

Puede crear una nueva clase para eliminar el margen y puede aplicar al elemento donde desea eliminar el margen adicional:

.margL0 { margin-left:0 !important }

! importante : le ayudará a eliminar el margen predeterminado o sobrescribir el valor del margen actual

y aplicar a ese div desde el que desea eliminar el margen del lado izquierdo

Puede personalizar su sistema Bootstrap Grid y definir su grilla de respuesta personalizada.

cambie sus valores predeterminados para el siguiente ancho de canal de @grid-gutter-width = 30px a @grid-gutter-width = 0px

(El ancho del canal es el relleno entre columnas. Se divide por la mitad para la izquierda y la derecha.)

Reducir solo el relleno de las columnas no resultará en el truco, ya que ampliará el ancho de la página, haciendo que sea irregular con el resto de la página, por ejemplo, la barra de navegación. Es necesario reducir igualmente el margen negativo en la fila. Tomando el ejemplo MENOS de @martinedwards:

.row-no-padding { margin-left: 0; margin-right: 0; [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } }

Si descarga bootstrap con los archivos SASS, podrá editar el archivo de configuración donde haya una configuración para el margen de las columnas y luego guardarla, de esa manera SASS calcula el nuevo ancho de las columnas.

Siempre agrego este estilo a mi Bootstrap LESS / SASS:

.row-no-padding { [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } }

Luego en el HTML puedes escribir:

<div class="row row-no-padding">

Si desea apuntar solo a las columnas secundarias, puede usar el selector de niños (Gracias John Wu).

.row-no-padding > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

También es posible que desee eliminar el relleno solo para ciertos tamaños de dispositivos (ejemplo SASS):

/* Small devices (tablets, 768px and up) */ @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { .row-sm-no-padding { [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } }

Puede eliminar la parte de ancho máximo de la consulta de medios si desea que sea compatible con dispositivos pequeños hacia arriba.

Supongo que es más fácil de usar

margin:-30px;

para anular el valor original establecido por bootstrap.

He intentado

margin: 0px -30px 0px -30px;

Y funcionó para mí.

simplemente agregue "no-padding" que es una clase incorporada en bootstrap

Bootstrap 4 tiene una clase nativa para hacer esto: agregar la clase .no-gutters .row principal

Puede crear Less Mixins usando bootstrap para administrar márgenes y rellenos de sus columnas como,

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

Uso:

xs-padding-lr-15px//left right both xs-padding-l-15px xs-padding-r-15px

Del mismo modo para establecer el margen / relleno cero puede utilizar,

xs-padding-lr-0px xs-padding-l-0px xs-padding-r-0px

<div class="col-md-12"> <h2>OntoExplorer<span style="color:#b92429">.</span></h2> <div class="col-md-4"> <div class="widget row"> <div class="widget-header"> <h3>Dimensions</h3> </div> <div class="widget-content" id=""> <div id=''jqxWidget''> <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div> <div style="clear:both;" id="listBoxB"></div> </div> </div> </div> </div> <div class="col-md-8"> <div class="widget row"> <div class="widget-header"> <h3>Results</h3> </div> <div class="widget-content"> <div id="map_canvas" style="height: 362px;"></div> </div> </div> </div>

Puede agregar una clase de fila al div dentro de col-md-4 y el margen de -15px de la fila equilibrará el margen de las columnas. Buena explicación here sobre los canales y filas en Bootstrap 3.

<style> .col-md-12{ padding-left:0px !important; padding-right:0px !important; } .col-md-8{ padding-left:0px !important; padding-right:0px !important; } .col-md-4{ padding-left:0px !important; padding-right:0px !important; } </style>

[class*="col-"] padding: 0 margin: 0