Supprimer le rembourrage des colonnes dans Bootstrap 3

Question

Problème :

Suppression du padding/margin à 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 souhaitée :

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

Avis :

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

Answer 1

Vous utiliseriez normalement .row pour envelopper deux colonnes, et non .col-md-12 - c'est une colonne qui englobe une autre colonne. Après tout, .row n'a pas les marges supplémentaires et le rembourrage qu'une col-md-12 et réduit également l'espace qu'une colonne introduirait avec des marges négatives à gauche et à droite.

<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 vraiment Si vous voulez supprimer les marges, ajoutez une classe pour filtrer les marges de chaque colonne enfant.

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

Answer 2

Bootstrap 4 a ajouté .classe sans-guttes .

Bootstrap 3.4 a ajouté .row-no-gutters class

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 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 de périphériques (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 max-width de la requête média si vous voulez qu'elle prenne en charge les petits appareils vers le haut.

Answer 3

Réduire uniquement le remplissage des colonnes ne suffira pas, car vous augmenterez la largeur de la page, ce qui la rendra inégale par rapport au reste de votre page, par exemple la barre de navigation. 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;
  }
}

Answer 4

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 pouvez @inclure uniquement les déclarations dont vous avez besoin.

Answer 5

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

Vous trouverez la variable dans le variables.less fichier : il s'appelle @grid-gutter-width .

C'est décrit comme ça dans les sources :

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

Mettez-le à 0, compilez bootstrap.less et inclure 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 d'amorçage comme moi.