Eliminar el relleno de las columnas en Bootstrap 3

342

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.

Aviso:

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

css  twitter-bootstrap  html 
— kexxcream
fuente
1
Para Bootstrap 4 use pl-0 pr-0ie<div class="col-7 pl-0 pr-0">
— Muhammad Shahzad
Incluso más corto, px-0que incluye tanto la izquierda como la derecha.
— Théophile hace

Respuestas:

454

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

<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;
}
— MackieeE
fuente
¿Es necesario agregar .without-padding a la clase de contenedor? Yo diría que agregar .nopadding al .col-md-8 div con el código CSS que proporcionó es suficiente.
— Charles Ingalls
59
Por lo general, creo 3 clases adicionales en mi CSS personalizado, es decir, .padding-0que establece el relleno izquierdo y derecho (solo) en 0; .padding-smeso establece el relleno en 2px y .padding-mdeso establece el relleno en 5px. El relleno habitual es de 15 px (a menos que se personalice), por lo que estas clases adicionales son suficientes.
— MichaelJTaylor
por cierto .row movió su nueva línea
— ozanmuyes
66
El relleno habitual se personaliza en variables.less @ grid-gutter-width: 30px;
— Vladislav Lezhnev
66
¿hay alguna rutina de arranque predefinida para eliminar el relleno o crear una clase es la única solución
— Gaurav Aggarwal
186

Bootstrap 4 ha agregado .no-guttersclase .

Bootstrap 3 : 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 solo desea orientar las columnas secundarias, puede usar el selector secundario (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 dispositivo (ejemplo de 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 admita dispositivos pequeños hacia arriba.

— martinedwards
fuente
10
Esto es CSS simple aparte de la anidación (que también está en SASS), por lo que debería funcionar igual.
— Martinedwards
44
Sugiero usar el selector secundario directo para mejorar el rendimiento. Usar en su & >[class*="col-"]lugar.
— John Wu
3
@JohnWu que también evita que las filas anidadas hereden el estilo, lo que me causó algunos problemas. ¡Gracias!
— Troy Carlson el
2
Debería usarlo [class^="col-"], [class*=" col-"] {...}en su lugar para no apuntar accidentalmente a las clases nombradas, foocol-por ejemplo. Esto apuntará a elementos que tienen ese nombre de clase al inicio o que también lo tienen como una clase secundaria sin apuntar a dónde se encuentra la cadena como parte de otro nombre de clase.
— Brett
1
Santo humo! Acabo de pasar horas luchando con lo que pensé que era un error de ventana gráfica de iOS porque mi iPhone 6 a veces (pero de manera inconsistente) se autoenfoca en mi página web. Después de quitar el relleno de col, creo que el autozoom funciona correctamente. ¡Gracias!
— Ryan
45

Reducir solo el relleno en las columnas no será el truco, ya que extenderá el ancho de la página, haciéndola desigual con el resto de su página, digamos barra de navegación. Debe 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;
  }
}
— phoeb
fuente
Esto es solo un problema cuando su fila no está en un contenedor u otra columna. Los márgenes negativos solo compensan el relleno de esos elementos
— Fred Stark
Necesitaba !importantque ambos márgenes hicieran que esto funcionara
— Philip Bijker,
22

Específicamente para SASS mixin:

@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, puede usar 

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

Claro, puede incluir solo aquellas declaraciones que necesite.

— Vitaliy Silin
fuente
Estoy tratando de usar este mixin (gracias por eso) en esta situación y el relleno no funciona. .banners-home { @include make-row(); .banner-comprar,.banner-pq{ @include no-padding("all"); @include make-xs-column(6); @include make-sm-column(6); @include make-md-column(6); @include make-lg-column(6); } .banner-simulador{ @include no-padding("all"); @include make-xs-column(12); @include make-sm-column(12); @include make-md-column(12); @include make-lg-column(12); } }
— jpcmf80
Me doy cuenta de lo que está mal. Necesito crear otro mixin para que esta solución funcione. Por cierto, gracias por la
— mezcla de
Solo creo esto @mixin nopadding{ padding:0!important; }en mi _mixin.scss y luego lo agrego @include nopadding;al código anterior. :)
— jpcmf80
18

De ahora en adelante solo disponible en Bootstrap4

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

nota: .p-0 y .m-0 ya agregaron bootstrap.css

— Ali Göksel Bektaş
fuente
12

Bootstrap 4 tiene una clase nativa para hacer esto: agregue la clase .no-guttersal padre.row

— Guillaume Gautier
fuente
10

Otra solución, factible solo si compila bootstrap de sus MENOS orígenes, es redefinir la variable que establece el relleno para las columnas.

Encontrará la variable en el variables.lessarchivo: 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.lesse incluya el resultado bootstrap.css. Estás listo. Puede ser una alternativa a la definición de una regla adicional, si ya está utilizando fuentes de arranque como yo.

— enlace
fuente
6

Bootstrap 3, desde la versión 3.4.0 , tiene una forma oficial de eliminar el relleno: la clase row-no-gutters.

Ejemplo de la documentación :

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
— Smi
fuente
3

Ninguna de las soluciones anteriores funcionó perfectamente para mí. Después de esta respuesta , pude crear algo que funciona para mí. 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;
    }
}
— rlv-dan
fuente
3

Elimine el espacio de las columnas en blanco y negro con bootstrap 3.7.7 o menos.

.no-gutter es una clase personalizada que puede agregar a sus DIV de fila

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
— Súper modelo
fuente
Esto funcionó y no requirió MENOS o SASS. Me di cuenta de que tenía que agregar la clase de contenedor a mi fila, sin embargo, así como aplicar este estilo extra: margin:0 auto;.
— Volomike
Los desarrolladores deberán darse cuenta con esto de que una vez hecho esto, deben crear un DIV dentro de la columna y aplicar margen para crear sus propios tamaños de canal.
— Volomike
2 
<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 del col-md-4 y el margen -15px de la fila equilibrará el canal de las columnas. Buena explicación aquí sobre canales y filas en Bootstrap 3.

— 1Bladesforhire
fuente
2

Supongo que es más fácil usar 

margin:-30px;

para anular el valor original establecido por bootstrap.

He intentado 

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

Y funcionó para mí.

— Basheer
fuente
1

Envuelva sus columnas en un .row y agregue 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 pegue los siguientes contenidos en su 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;
}
— Chi
fuente
1

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;
}
    
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>
Expandir fragmento

— haryx8
fuente
0

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 del que desea eliminar el margen del lado izquierdo

— Udit Bansal
fuente
0 
<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>
— Sreelakshmi
fuente
¿Podría dar una explicación con su respuesta?
— PKirby
proporcione estos códigos antes o después de la etiqueta <head> para que esto anule las propiedades de clase en esa página
— Sreelakshmi
0

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

De manera similar, para configurar el margen / margen cero puede usar,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— Mohan Dere
fuente
Parece que hay información esencial en la página vinculada. Este no es el camino de SO. ¡Ponga información esencial en su respuesta!
— jogo
O la gente podría usar la respuesta aceptada con 159 votos a favor y sin votos a favor, que ha estado aquí durante dos años. O una de las otras respuestas con más de diez votos a favor. Tendrás que esforzarte más para ganar un lugar en esta página contra esa competencia.
— Tom Zych
0

A partir de la respuesta de Vitaliy Silin . Cubriendo no solo casos en los que no queremos relleno, sino también 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 luego genera:

.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;
}
— Adrien Be
fuente
0

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 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;
}
— Mahesh
fuente
0

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

— TheCrazyProfessor
fuente
0

Puede personalizar su sistema de cuadrícula Bootstrap y definir su cuadrícula receptiva personalizada.

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

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

— Rafiqul Islam
fuente
0

Todavía prefiero tener control sobre cada relleno en cada tamaño de pantalla, por lo que este CSS puede ser útil para ustedes :)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}
— Eryk Wróbel
fuente
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.