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

[class*="col-"]
  padding: 0;
  margin: 0;

Answer 2

Keine der obigen Lösungen hat für mich perfekt funktioniert. Nach dieser Antwort war ich in der Lage, etwas zu erstellen, das für mich funktioniert. Hier verwende ich auch eine Media Query, um dies nur auf kleinen Bildschirmen zu beschränken.

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

Answer 3

Entfernen Sie den Abstand zwischen den Spalten mit Bootstrap 3.7.7 oder älter.

.no-gutter ist eine benutzerdefinierte Klasse, die Sie zu Ihren Reihen-DIVs hinzufügen können

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }

Answer 4

Sie können der div innerhalb von col-md-4 eine Klasse von row hinzufügen, und der -15px-margin der row wird den Abstand von den Spalten ausgleichen. Gute Erklärung hier über Spalten und Reihen in Bootstrap 3.

Answer 5

Ich denke, es ist einfacher, einfach zu verwenden

margin:-30px;

um den ursprünglichen Wert von Bootstrap zu überschreiben.

Ich habe versucht

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

und es hat für mich funktioniert.