Entfernen Sie das Padding von Spalten in Bootstrap 3

Question

Problem:

Padding/Margin entfernen rechts und links von col-md-* in Bootstrap 3.

HTML code:

    OntoExplorer.

                Maße

                Ergebnisse

Desired output:

Aktuell fügt dieser Code Padding/Margin rechts und links von den beiden Spalten hinzu. Ich frage mich, was ich falsch mache, um diesen zusätzlichen Platz an den Seiten zu entfernen?

Hinweis:

Wenn ich "col-md-4" entferne, dann dehnen sich beide Spalten auf 100% aus, aber ich möchte, dass sie nebeneinander stehen.

Answer 1

Sie würden normalerweise .row verwenden, um zwei Spalten zu umschließen, nicht .col-md-12 - das ist eine Spalte, die eine andere Spalte umgibt. Immerhin hat .row nicht die zusätzlichen Ränder und das Padding, das eine col-md-12 mitbringen würde, und berücksichtigt auch den Platz, den eine Spalte mit negativen linken & rechten Rändern einführen würde.

        OntoExplorer.

                    Dimensionen

                    Ergebnisse

Wenn Sie das Padding/Margin wirklich entfernen möchten, fügen Sie eine Klasse hinzu, um die Ränder/Paddings für jede untergeordnete Spalte herauszufiltern.

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

Answer 2

Bootstrap 4 hat die Klasse .no-gutters hinzugefügt.

Bootstrap 3.4 hat die Klasse .row-no-gutters hinzugefügt

Bootstrap 3: Ich füge immer diesen Stil zu meinem Bootstrap LESS / SASS hinzu:

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

Dann im HTML können Sie schreiben:

Wenn Sie nur die untergeordneten Spalten ansprechen möchten, können Sie den Kindselektor verwenden (Danke John Wu).

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

Sie möchten möglicherweise das Padding nur für bestimmte Gerätegrößen entfernen (SASS Beispiel):

/* Kleine Geräte (Tablets, 768px und höher) */
@media (min-width: $screen-sm-min) und (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

Sie können den max-width Teil der Media-Abfrage entfernen, wenn Sie möchten, dass sie auch kleine Geräte nach oben unterstützt.

Answer 3

Nur das Padding in den Spalten zu reduzieren wird nicht funktionieren, da die Breite der Seite verlängert wird, was sie ungleichmäßig mit dem Rest Ihrer Seite macht, z.B. der Navbar. Sie müssen den negativen Rand in der Zeile ebenfalls gleichmäßig reduzieren. Nehmen wir das LESS-Beispiel von @martinedwards:

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

Answer 4

Ab sofort nur noch bei Bootstrap 4 verfügbar

Hinweis: .p-0 und .m-0 wurden bereits zu bootstrap.css hinzugefügt

Answer 5

Speziell für 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");

Dann im HTML kannst du verwenden

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - um den Abstand von allen Seiten zu entfernen

Sicher, du kannst nur die Anweisungen @include verwenden, die du brauchst.