Supprimer le remplissage des colonnes dans Bootstrap 3

342

Problème:

Retirez le rembourrage / la marge à droite et à gauche de col-md- * dans Bootstrap 3.

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

Sortie désirée:

Actuellement, ce code ajoute un remplissage / marge à droite et à gauche des deux colonnes. Je me demande ce qui me manque pour supprimer cet espace supplémentaire sur les côtés?

Remarquer:

Si je supprime "col-md-4", les deux colonnes s'étendent à 100% mais je veux qu'elles soient côte à côte.

css  twitter-bootstrap  html 
— kexxcream
source
1
Pour Bootstrap 4, utilisez pl-0 pr-0ie<div class="col-7 pl-0 pr-0">
— Muhammad Shahzad
Encore plus court, px-0qui comprend à la fois la gauche et la droite.
— Théophile

Réponses:

454

Vous utiliseriez normalement .rowpour encapsuler deux colonnes, pas .col-md-12- c'est une colonne qui en contient une autre. Après tout, .rown'a pas les marges supplémentaires et le rembourrage qu'un col-md-12apporterait et réduit également l'espace qu'une colonne introduirait avec des marges gauche et droite négatives.

<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 vous vouliez vraiment supprimer le remplissage / les marges, ajoutez une classe pour filtrer les marges / remplissages de chaque colonne enfant.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
— MackieeE
source
L'ajout de .without-padding à la classe de conteneur est-il même nécessaire? Je dirais que l'ajout de .nopadding à la div .col-md-8 avec le code CSS que vous avez fourni est suffisant.
— Charles Ingalls
59
Je crée généralement 3 classes supplémentaires dans mon CSS personnalisé à savoir, .padding-0qui définit le remplissage gauche et droit (uniquement) à 0; .padding-smqui définit le remplissage à 2 pixels et .padding-mdqui définit le remplissage à 5 pixels. Le rembourrage habituel est de 15 pixels (sauf si personnalisé), donc ces classes supplémentaires sont suffisantes.
— MichaelJTaylor
au fait .row a déplacé sa nouvelle ligne
— ozanmuyes
6
Le remplissage habituel est personnalisé dans variables.less @ grid-gutter-width: 30px;
— Vladislav Lezhnev
6
existe-t-il un bootstrap prédéfini pour supprimer le rembourrage ou créer une classe est la seule solution
— Gaurav Aggarwal
186

Bootstrap 4 a ajouté de la .no-guttersclasse .

Bootstrap 3 : J'ajoute toujours ce style à mon Bootstrap LESS / SASS:

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

Ensuite, dans le HTML, vous pouvez écrire:

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

Si vous souhaitez cibler uniquement les colonnes enfants, vous pouvez utiliser le sélecteur d'enfant (merci John Wu).

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

Vous pouvez également vouloir supprimer le rembourrage uniquement pour certaines tailles d'appareils (exemple 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;
    }
  }
}

Vous pouvez supprimer la partie largeur maximale de la requête multimédia si vous souhaitez qu'elle prenne en charge les petits appareils vers le haut.

— martinedwards
source
10
C'est du CSS simple à part l'imbrication (qui est également dans SASS), donc cela devrait fonctionner de la même manière.
— martinedwards
4
Je suggère d'utiliser le sélecteur d'enfant direct pour améliorer les performances. Utilisez & >[class*="col-"]plutôt.
— John Wu
3
@JohnWu qui empêche également les lignes imbriquées d'hériter du style, ce qui m'a causé un peu de problème. Merci!
— Troy Carlson
2
Vous devriez vraiment utiliser à la [class^="col-"], [class*=" col-"] {...}place pour ne pas cibler accidentellement des classes nommées foocol-par exemple. Cela ciblera les éléments qui ont ce nom de classe au début ou l'ont également comme classe secondaire sans cibler où la chaîne se trouve dans le cadre d'un autre nom de classe.
— Brett
1
Holy fume! Je viens de passer des heures à lutter contre ce que je pensais être un bug de la fenêtre d'affichage iOS parce que mon iPhone 6 se zoomait parfois (mais de manière incohérente) sur ma page Web. Après avoir retiré le rembourrage col, je pense que le zoom automatique fonctionne correctement! Merci!
— Ryan
45

Réduire uniquement le remplissage des colonnes ne fera pas l'affaire, car vous augmenterez la largeur de la page, ce qui la rendra inégale avec le reste de votre page, par exemple navbar. Vous devez également réduire la marge négative sur la ligne. Prenons l'exemple LESS de @martinedwards:

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
— phoeb
source
Il s'agit uniquement d'un problème lorsque votre ligne n'est pas dans un conteneur ou une autre colonne. Les marges négatives viennent juste compenser le rembourrage de ces éléments
— Fred Stark
J'avais besoin !importantdes deux marges pour faire ce travail
— Philip Bijker
22

Spécifiquement pour le 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");

Ensuite, en HTML, vous pouvez utiliser 

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

Bien sûr, vous ne pouvez @inclure que les déclarations dont vous avez besoin.

— Vitaliy Silin
source
Im essayant d'utiliser ce mixin (merci pour cela) dans cette situation et le rembourrage ça ne fonctionne pas. .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
Je comprends ce qui ne va pas. J'ai besoin de créer un autre mixin pour que cette solution fonctionne. Btw, merci pour le mixin SASS :)
— jpcmf80
Je crée juste ceci @mixin nopadding{ padding:0!important; }dans mon _mixin.scss puis ajoute @include nopadding;au code ci-dessus. :)
— jpcmf80
18

Ci-après uniquement disponible sur Bootstrap4

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

note: .p-0 et .m-0 ont déjà ajouté bootstrap.css

— Ali Göksel Bektaş
source
15

Ajoutez simplement "no-padding" qui est une classe intégrée dans bootstrap 3

— bhargav
source
Fonctionne pour moi lors de l'ajout à une colonne. Cela doit être utilisé lors de l'utilisation de colonnes imbriquées pour éviter le remplissage multiple.
— NicolasBernier
4
En outre, on peut ajouter une no-gutterclasse au parent .row.
— ArtBIT
3
@ArtBIT Je pense que vous devez coder no-guttersselon v4-alpha.getbootstrap.com/layout/grid/#no-gutters . Ce n'est pas intégré.
— Caltor
10

Une autre solution, réalisable uniquement si vous compilez le bootstrap à partir de ses sources MOINS, consiste à redéfinir la variable qui définit le remplissage des colonnes.

Vous trouverez la variable dans le variables.lessfichier: elle s'appelle @grid-gutter-width.

Il est décrit comme ceci dans les sources:

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

Définissez cette valeur sur 0, compilez bootstrap.lesset incluez le résultat bootstrap.css. Vous avez terminé. Cela peut être une alternative à la définition d'une règle supplémentaire, si vous utilisez déjà des sources de bootstrap comme moi.

— lien
source
6

Bootstrap 3, depuis la version 3.4.0 , a une manière officielle de supprimer le rembourrage: la classe row-no-gutters.

Exemple tiré de la documentation :

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

Aucune des solutions ci-dessus ne fonctionnait parfaitement pour moi. Suite à cette réponse, j'ai pu créer quelque chose qui fonctionne pour moi. Ici, j'utilise également une requête multimédia pour limiter cela aux petits écrans uniquement.

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

Supprimer l'espacement des colonnes n / b à l'aide de bootstrap 3.7.7 ou moins.

.no-gutter est une classe personnalisée que vous pouvez ajouter à vos DIVs de ligne

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
— Super modèle
source
Cela a fonctionné et n'a pas nécessité LESS ou SASS. J'ai remarqué que je devais ajouter la classe de conteneurs à ma rangée, cependant, ainsi que d' appliquer ce style supplémentaire: margin:0 auto;.
— Volomike
Les développeurs devront réaliser avec cela qu'une fois cela fait, ils doivent créer un DIV à l'intérieur de la colonne et y appliquer une marge afin de créer leurs propres tailles de gouttière.
— 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>

Vous pouvez ajouter une classe de ligne à la div à l'intérieur du col-md-4 et la marge de -15px de la ligne équilibrera la gouttière des colonnes. Bonne explication ici sur les gouttières et les rangées dans Bootstrap 3.

— 1 Lamesforhire
source
2

Je suppose qu'il est plus facile d'utiliser simplement 

margin:-30px;

pour remplacer la valeur d'origine définie par bootstrap.

J'ai essayé 

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

et cela a fonctionné pour moi.

— Basheer
source
1

Enveloppez vos colonnes dans un .row et ajoutez à cette div une classe appelée "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>

Collez ensuite le contenu ci-dessous dans votre fichier 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
source
1

Supprimer / personnaliser la gouttière Bootstrap avec la référence 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>
Développer l'extrait

— haryx8
source
0

Vous pouvez créer une nouvelle classe pour supprimer la marge et pouvez appliquer à l'élément où vous souhaitez supprimer la marge supplémentaire:

.margL0 { margin-left:0 !important }

! important : il vous aidera à supprimer la marge par défaut ou à écraser la valeur de marge actuelle

et appliquer à cette div à partir de laquelle vous souhaitez supprimer la marge du côté gauche

— Udit Bansal
source
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
source
Pourriez-vous s'il vous plaît fournir une explication avec votre réponse.
— PKirby
fournissez ces codes avant ou après la balise <head> afin que cela remplace les propriétés de classe de cette page
— Sreelakshmi
0

Vous pouvez créer moins de mixages en utilisant le bootstrap pour gérer les marges et les remplissages de vos colonnes comme,

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

Usage: 

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

De même pour définir la marge / remplissage zéro, vous pouvez utiliser,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— Mohan Dere
source
Il semble que les informations essentielles se trouvent sur la page liée. Ce n'est pas la voie du SO. Mettez les informations essentielles dans votre réponse!
— jogo
Ou les gens pourraient simplement utiliser la réponse acceptée avec 159 votes positifs et aucun vote négatif, qui est là depuis deux ans. Ou l'une des nombreuses autres réponses avec plus de dix votes positifs. Vous devrez faire plus d'efforts pour gagner une place sur cette page contre cette compétition.
— Tom Zych
0

S'appuyer sur la réponse de Vitaliy Silin . Couvrant non seulement les cas où nous ne voulons pas du tout de rembourrage, mais aussi les cas où nous avons des rembourrages de taille standard.

Voir la conversion en direct de ce code en CSS sur 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);
  }
}

Cela génère ensuite:

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

Parfois, vous risquez de perdre le remplissage souhaité pour les colonnes. Ils finissent par coller les uns aux autres. Pour éviter cela, vous pouvez mettre à jour la classe comme suit:

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

et classe correspondante:

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

Si vous téléchargez le bootstrap avec les fichiers SASS, vous pourrez éditer le fichier de configuration où il y a un paramètre pour la marge des colonnes puis l'enregistrer, de cette manière le SASS calcule la nouvelle largeur des colonnes

— TheCrazyProfessor
source
0

Vous pouvez personnaliser votre système de grille Bootstrap et définir votre grille réactive personnalisée.

changer vos valeurs par défaut pour la largeur de gouttière suivante de @grid-gutter-width = 30pxà@grid-gutter-width = 0px

(La largeur de la gouttière est un remplissage entre les colonnes. Elle est divisée en deux pour la gauche et la droite.)

— Rafiqul Islam
source
0

Je préfère toujours avoir le contrôle sur chaque rembourrage dans chaque taille d'écran, donc ce CSS pourrait vous être utile :)

.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
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.