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

Einfach "no-padding" hinzufügen, was eine eingebaute Klasse in Bootstrap 3 ist

Answer 2

Bootstrap 4 hat eine native Klasse, um dies zu tun: Fügen Sie der Elternklasse .row die Klasse .no-gutters hinzu

Answer 3

Eine andere Lösung, die nur möglich ist, wenn Sie Bootstrap aus seinen LESS-Quellen kompilieren, besteht darin, die Variable neu zu definieren, die den Abstand für die Spalten festlegt.

Sie finden die Variable in der Datei variables.less: sie heißt @grid-gutter-width.

Es wird in den Quellen wie folgt beschrieben:

//** Abstand zwischen Spalten. Wird zur Hälfte für links und rechts geteilt.
@grid-gutter-width: 30px;

Setzen Sie dies auf 0, kompilieren Sie bootstrap.less und schließen Sie das resultierende bootstrap.css ein. Sie sind fertig. Es kann eine Alternative sein, eine zusätzliche Regel zu definieren, wenn Sie bereits Bootstrap-Quellen wie ich verwenden.

Answer 4

Bootstrap 4 verfügt über die Klasse .no-gutters, die Sie zum row-Element hinzufügen können.

            [IHR INHALT HIER]

Referenz: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Answer 5

Bootstrap 3 hat seit Version 3.4.0 einen offiziellen Weg, um den Padding zu entfernen: die Klasse row-no-gutters.

Beispiel aus der Dokumentation:

  .col-xs-12 .col-md-8
  .col-xs-6 .col-md-4

  .col-xs-6 .col-md-4
  .col-xs-6 .col-md-4
  .col-xs-6 .col-md-4

  .col-xs-6
  .col-xs-6