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

Wickeln Sie Ihre Spalten in einer .row ein und fügen Sie diesem div eine Klasse namens "no-gutter" hinzu

Dann fügen Sie den folgenden Inhalt in Ihre CSS-Datei ein

.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;
}

Answer 2

Entfernen/Anpassen des Bootstrap-Abstands mit CSS Referenz: http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

/* entfernen */
.gutter-0.row {
  margin-right: -0px;
  margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

/* anpassen */
.gutter-6.row {
  margin-right: -3px;
  margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
  padding-right: 3px;
  padding-left: 3px;
}

        Bildunterschrift
        mehr
        Button Button

  ... (weitere Abschnitte) ...

Answer 3

Sie können eine neue Klasse erstellen, um den Rand zu entfernen, und diese auf das Element anwenden, von dem Sie den zusätzlichen Rand entfernen möchten:

.margL0 { margin-left:0 !important }

!important: Es hilft Ihnen, den Standardrand zu entfernen oder den aktuellen Randwert zu überschreiben

und wenden Sie es auf das div an, von dem aus Sie den Rand von der linken Seite entfernen möchten

Answer 4

Ich bevorzuge es immer noch, die Kontrolle über jedes Padding in jeder Bildschirmgröße zu haben, sodass dieses CSS für euch nützlich sein könnte :)

.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;}
}

Answer 5

Sie können Ihr Bootstrap-Rastersystem anpassen und Ihr benutzerdefiniertes responsives Raster definieren.

Ändern Sie Ihre Standardwerte für die folgende Spaltenbreite von @grid-gutter-width = 30px auf @grid-gutter-width = 0px

(Der Spaltenabstand ist der Abstand zwischen den Spalten. Er wird zur Hälfte für links und rechts aufgeteilt.)