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

Wenn Sie Bootstrap mit den SASS-Dateien herunterladen, können Sie die Konfigurationsdatei bearbeiten, in der es eine Einstellung für den Rand der Spalten gibt, und sie dann speichern. Auf diese Weise berechnet SASS die neue Breite der Spalten.

Answer 2

Manchmal kann es passieren, dass du das Padding verlierst, das du für die Spalten haben möchtest. Sie kleben dann aneinander. Um das zu verhindern, könntest du die Klasse wie folgt aktualisieren:

                    Id

                    Value

und die entsprechende Klasse:

.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
    padding-left: 0;
    padding-right: 0;
}

.NoPaddingForChildren > div:first-child {
    padding-left: 0;
}

.NoPaddingForChildren > div:last-child {    
    padding-right: 0;
}

Answer 3

Basierend auf Vitaliy Silins Antwort. Abdeckung nicht nur der Fälle, in denen wir überhaupt keine Polsterung wollen, sondern auch der Fälle, in denen wir Standardgrößen haben.

Siehe die Live-Umwandlung dieses Codes in CSS auf sassmeister.com

@mixin padding($seite, $größe) {
    $polstergröße : 0;
    @if $größe == 'xs' { $polstergröße : 5px; }
    @else if $größe == 's' { $polstergröße : 10px; }
    @else if $größe == 'm' { $polstergröße : 15px; }
    @else if $größe == 'l' { $polstergröße : 20px; }

    @if $seite == 'all' {
        .polsterung--#{$größe} {
            padding: $polstergröße !important;
        }
    } @else {
        .polsterung-#{$seite}--#{$größe} {
            padding-#{$seite}: $polstergröße !important;
        }
    }
}

$seitenliste: all top right bottom left;
$größenliste: none xs s m l;
@each $aktuelle-seite in $seitenliste {
  @each $aktuelle-größe in $größenliste {
    @include padding($aktuelle-seite,$aktuelle-größe);
  }
}

Dies ergibt dann:

.polsterung--none {
  padding: 0 !important;
}

.polsterung--xs {
  padding: 5px !important;
}

.polsterung--s {
  padding: 10px !important;
}

.polsterung--m {
  padding: 15px !important;
}

.polsterung--l {
  padding: 20px !important;
}

.polsterung-top--none {
  padding-top: 0 !important;
}

.polsterung-top--xs {
  padding-top: 5px !important;
}

.polsterung-top--s {
  padding-top: 10px !important;
}

.polsterung-top--m {
  padding-top: 15px !important;
}

.polsterung-top--l {
  padding-top: 20px !important;
}

.polsterung-right--none {
  padding-right: 0 !important;
}

.polsterung-right--xs {
  padding-right: 5px !important;
}

.polsterung-right--s {
  padding-right: 10px !important;
}

.polsterung-right--m {
  padding-right: 15px !important;
}

.polsterung-right--l {
  padding-right: 20px !important;
}

.polsterung-bottom--none {
  padding-bottom: 0 !important;
}

.polsterung-bottom--xs {
  padding-bottom: 5px !important;
}

.polsterung-bottom--s {
  padding-bottom: 10px !important;
}

.polsterung-bottom--m {
  padding-bottom: 15px !important;
}

.polsterung-bottom--l {
  padding-bottom: 20px !important;
}

.polsterung-left--none {
  padding-left: 0 !important;
}

.polsterung-left--xs {
  padding-left: 5px !important;
}

.polsterung-left--s {
  padding-left: 10px !important;
}

.polsterung-left--m {
  padding-left: 15px !important;
}

.polsterung-left--l {
  padding-left: 20px !important;
}

Answer 4

Sie können Less Mixins mit Bootstrap erstellen, um die Ränder und Abstände Ihrer Spalten zu verwalten, z. B.

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

Verwendung:

xs-padding-lr-15px//links rechts beide
xs-padding-l-15px 
xs-padding-r-15px

Ebenso können Sie für das Festlegen des Rands/Abstandes auf null Folgendes verwenden:

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px

Answer 5

.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}