Rimuovere l'imbottitura dalle colonne in Bootstrap 3

342

Problema:

Rimuovi il riempimento / margine a destra e a sinistra di col-md- * in Bootstrap 3.

Codice 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>

Uscita desiderata:

Attualmente questo codice aggiunge il riempimento / margine a destra e a sinistra delle due colonne. Mi chiedo cosa mi manca per rimuovere questo spazio extra sui lati?

Avviso:

Se rimuovo "col-md-4", entrambe le colonne si espandono al 100% ma voglio che siano una accanto all'altra.

css  twitter-bootstrap  html 
— kexxcream
fonte
1
Per Bootstrap 4 usa pl-0 pr-0ie<div class="col-7 pl-0 pr-0">
— Muhammad Shahzad l'
Ancora più breve, px-0che include sia a destra che a sinistra.
— Théophile il

Risposte:

454

Normalmente useresti .row per avvolgere due colonne, non .col-md-12- quella è una colonna che racchiude un'altra colonna. Dopotutto, .rownon ha i margini e il riempimento extra che un col-md-12porterebbe e sconta anche lo spazio che una colonna introdurrebbe con margini sinistro e destro negativi.

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

se tu veramente rimuovere il padding / margin, aggiungi una classe per filtrare i margini / padding per ogni colonna figlio.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
— MackieeE
fonte
È necessario aggiungere .without-padding alla classe container? Direi che aggiungere .nopadding al div .col-md-8 con il codice CSS che hai fornito è sufficiente.
— Charles Ingalls,
59
Di solito creo 3 classi extra nel mio CSS personalizzato, vale a dire .padding-0che imposta il riempimento sinistro e destro (solo) su 0; .padding-smche imposta il padding su 2px e .padding-mdche imposta il padding su 5px. La solita imbottitura è di 15px (a meno che non sia personalizzata), quindi queste classi extra sono sufficienti.
— MichaelJTaylor,
a proposito .row ha spostato la sua nuova linea
— ozanmuyes,
6
La solita imbottitura è personalizzata in variabili.less @ grid-gutter-width: 30px;
— Vladislav Lezhnev,
6
c'è qualche bootstrap predefinito per rimuovere il padding o creare una classe è solo una soluzione
— Gaurav Aggarwal,
186

Bootstrap 4 ha aggiunto .no-guttersclasse .

Bootstrap 3 : aggiungo sempre questo stile al mio Bootstrap LESS / SASS:

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

Quindi in HTML puoi scrivere:

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

Se desideri scegliere come target solo le colonne figlio, puoi utilizzare il selettore figlio (Grazie John Wu).

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

Potresti anche voler rimuovere l'imbottitura solo per determinate dimensioni del dispositivo (esempio 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;
    }
  }
}

È possibile rimuovere la parte di larghezza massima della query multimediale se si desidera che supporti piccoli dispositivi verso l'alto.

— martinedwards
fonte
10
Questo è un semplice CSS a parte l'annidamento (che è anche in SASS), quindi dovrebbe funzionare allo stesso modo.
— martinedwards,
4
Suggerisco di utilizzare il selettore figlio diretto per migliorare le prestazioni. Usa & >[class*="col-"]invece.
— John Wu
3
@JohnWu che impedisce anche alle righe nidificate di ereditare lo stile, il che mi ha causato un po 'di problemi. Grazie!
— Troy Carlson,
2
In realtà dovresti usare [class^="col-"], [class*=" col-"] {...}invece in modo da non indirizzare accidentalmente le classi nominate foocol-ad esempio. Questo avrà come target elementi che hanno quel nome di classe all'inizio o lo hanno anche come classe secondaria senza targetizzare dove si trova la stringa come parte di un altro nome di classe.
— Brett,
1
Sacri fumi! Ho appena trascorso ore a combattere con quello che pensavo fosse un bug di viewport iOS perché il mio iPhone 6 a volte (ma in modo incoerente) si auto-inseriva nella mia pagina web. Dopo aver rimosso l'imbottitura del col, penso che l'autozoom funzioni in modo appropriato! Grazie!
— Ryan
45

Ridurre solo il riempimento delle colonne non sarà un trucco, poiché estenderai la larghezza della pagina, rendendola irregolare con il resto della pagina, ad esempio navbar. È necessario ridurre equamente il margine negativo sulla riga. Prendendo il MENO esempio di @martinedwards:

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
— phoeb
fonte
Questo è solo un problema quando la tua riga non è in un contenitore o in un'altra colonna. I margini negativi hanno appena compensato l'imbottitura da quegli elementi
— Fred Stark il
Avevo bisogno !importantche entrambi i margini funzionassero
— Philip Bijker,
22

In particolare per il mixin 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");

Quindi in HTML, puoi usare 

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

Certo, puoi includere solo quelle dichiarazioni di cui hai bisogno.

— Vitaliy Silin
fonte
Sto cercando di usare questo mixin (grazie per quello) in questa situazione e l'imbottitura non funziona. .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,
Capisco cosa c'è che non va. Ho bisogno di creare un altro mixin per questa soluzione funziona. A proposito, grazie per il mixin SASS :)
— jpcmf80,
Ho appena creato questo @mixin nopadding{ padding:0!important; }nel mio _mixin.scss e quindi aggiungo @include nopadding;al codice sopra. :)
— jpcmf80
18

Di seguito disponibile solo su Bootstrap4

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

nota: .p-0 e .m-0 hanno già aggiunto bootstrap.css

— Ali Göksel Bektaş
fonte
15

aggiungi semplicemente "no-padding" che è la classe integrata in bootstrap 3

— Bhargav
fonte
Funziona per me quando si aggiunge a una colonna. Questo dovrebbe essere usato quando si usano colonne nidificate per evitare il riempimento multiplo.
— Nicolas Bernier,
4
Inoltre, si può aggiungere no-gutterclasse al genitore .row.
— ArtBIT
3
@ArtBIT Penso che sia necessario codificare no-gutterssecondo v4-alpha.getbootstrap.com/layout/grid/#no-gutters . Non è integrato.
— Caltor,
12

Bootstrap 4 ha una classe nativa per fare questo: aggiungi la classe .no-guttersal genitore.row

— Guillaume Gautier
fonte
10

Un'altra soluzione, fattibile solo se si compila bootstrap dalle sue fonti MENO, è ridefinire la variabile che imposta il riempimento per le colonne.

Troverai la variabile nel variables.lessfile: si chiama @grid-gutter-width.

È descritto così nelle fonti:

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

Impostalo su 0, compila bootstrap.lesse includi il risultato bootstrap.css. Hai fatto. Può essere un'alternativa alla definizione di una regola aggiuntiva, se stai già utilizzando fonti bootstrap come me.

— collegamento
fonte
6

Bootstrap 3, dalla versione 3.4.0 , ha un modo ufficiale di rimuovere il riempimento: la classe row-no-gutters.

Esempio dalla documentazione :

<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
fonte
3

Nessuna delle soluzioni sopra ha funzionato perfettamente per me. Dopo questa risposta sono stato in grado di creare qualcosa che funzioni per me. Qui sto anche usando una query multimediale per limitare questo solo a piccoli schermi.

@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
fonte
3

Rimuovi la spaziatura dalle colonne b / n usando bootstrap 3.7.7 o meno.

.no-gutter è una classe personalizzata che puoi aggiungere ai tuoi DIV di riga

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
— Super Model
fonte
Funzionava e non richiedeva MENO o SASS. Ho notato che ho dovuto aggiungere la classe contenitore alla mia fila, però, così come applicare questo stile in più: margin:0 auto;.
— Volomike
Gli sviluppatori dovranno rendersi conto che una volta fatto ciò, dovranno creare un DIV all'interno della colonna e applicare un margine a quello per creare le proprie dimensioni della grondaia.
— 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>

Puoi aggiungere una classe di riga al div all'interno del col-md-4 e il margine di -15px della riga bilancerà la grondaia dalle colonne. Buona spiegazione qui su grondaie e file in Bootstrap 3.

— 1Bladesforhire
fonte
2

Immagino sia più semplice da usare 

margin:-30px;

per sovrascrivere il valore originale impostato da bootstrap.

ho provato 

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

e ha funzionato per me.

— Basheer
fonte
1

Avvolgi le tue colonne in un .row e aggiungi a quel div una classe chiamata "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>

Quindi incolla i contenuti sottostanti nel tuo file 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
fonte
1

Rimuovere / personalizzare Bootstrap Gutter con riferimento 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>
Espandi frammento

— haryx8
fonte
0

È possibile creare una nuova classe per la rimozione del margine e applicare all'elemento in cui si desidera rimuovere il margine aggiuntivo:

.margL0 { margin-left:0 !important }

! important : ti aiuterà a rimuovere il margine predefinito o a sovrascrivere il valore del margine corrente

e si applica a quel div da cui si desidera rimuovere il margine dal lato sinistro

— Udit Bansal
fonte
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
fonte
Potresti fornire una spiegazione per favore con la tua risposta.
— PKirby,
fornire questi codici prima o dopo il tag <head> in modo che questo sovrascriva quelle proprietà della classe in quella pagina
— Sreelakshmi
0

Puoi creare meno mixin usando bootstrap per gestire i margini e le imbottiture delle colonne come,

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

Allo stesso modo per l'impostazione del margine / riempimento zero è possibile utilizzare,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— Mohan Dere
fonte
Sembra che le informazioni essenziali siano sulla pagina collegata. Questo non è il modo di SO. Inserisci le informazioni essenziali nella tua risposta!
— jogo,
Oppure le persone potrebbero semplicemente usare la risposta accettata con 159 voti positivi e nessun voto negativo, che è qui da due anni. O una delle tante altre risposte con oltre dieci voti. Dovrai fare di più per guadagnare un posto in questa pagina contro quella competizione.
— Tom Zych,
0

Costruire sulla risposta di Vitaliy Silin . Coprendo non solo i casi in cui non vogliamo affatto l'imbottitura, ma anche i casi in cui abbiamo imbottiture di dimensioni standard.

Guarda la conversione in tempo reale di questo codice in CSS su 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);
  }
}

Questo quindi 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
fonte
0

A volte potresti perdere l'imbottitura desiderata per le colonne. Finiscono per attaccarsi l'un l'altro. Per evitare ciò, è possibile aggiornare la classe come segue:

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

e classe corrispondente:

.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
fonte
0

Se scarichi bootstrap con i file SASS sarai in grado di modificare il file di configurazione in cui è presente un'impostazione per il margine delle colonne e quindi salvarlo, in questo modo SASS calcola la nuova larghezza delle colonne

— TheCrazyProfessor
fonte
0

Puoi personalizzare il tuo sistema Bootstrap Grid e definire la tua griglia reattiva personalizzata.

modificare i valori predefiniti per la seguente larghezza della grondaia da @grid-gutter-width = 30pxa@grid-gutter-width = 0px

(La larghezza della grondaia è una spaziatura tra le colonne. Viene divisa a metà per sinistra e destra.)

— Rafiqul Islam
fonte
0

Preferisco ancora avere il controllo su ogni imbottitura in ogni dimensione dello schermo, quindi questo CSS potrebbe essere utile a voi ragazzi :)

.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
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.