Problem:
Entfernen Sie in Bootstrap 3 rechts und links von col-md- * die Polsterung/den Rand.
HTML Quelltext:
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content" id="">
<div id='jqxWidget'>
<div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
<div style="clear:both;" id="listBoxB"></div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 362px;"></div>
</div>
</div>
</div>
</div>
Gewünschte Leistung:
Derzeit fügt dieser Code rechts und links von den beiden Spalten Füllung/Rand ein. Ich frage mich, was mir fehlt, um diesen zusätzlichen Raum an den Seiten zu entfernen?
Beachten:
Wenn ich "col-md-4" entferne, werden beide Spalten auf 100% erweitert, aber ich möchte, dass sie nebeneinander liegen.
Normalerweise würden Sie .row
verwenden, um zwei Spalten zu umbrechen, nicht .col-md-12
. Dies ist eine Spalte, die eine andere Spalte enthält. Schließlich hat .row
nicht die zusätzlichen Ränder und Füllungen, die ein col-md-12
mit sich bringt, und reduziert auch den Platz, den eine Spalte mit negativen linken und rechten Rändern einführt.
<div class="container">
<div class="row">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
<div class="col-md-8 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
</div>
</div>
wenn Sie wirklich die Auffüllung/Ränder entfernen möchten, fügen Sie eine Klasse hinzu, um die Ränder/Auffüllung für jede untergeordnete Spalte herauszufiltern.
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
Ich füge meinem Bootstrap LESS/SASS immer diesen Stil hinzu:
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Dann können Sie in das HTML schreiben:
<div class="row row-no-padding">
Wenn Sie nur die untergeordneten Spalten anvisieren möchten, können Sie die untergeordnete Auswahl verwenden (Danke, John Wu).
.row-no-padding > [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
Sie möchten möglicherweise auch die Auffüllung nur für bestimmte Gerätegrößen entfernen (SASS-Beispiel):
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.row-sm-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
}
Sie können den Teil mit maximaler Breite der Medienabfrage entfernen, wenn kleine Geräte nach oben unterstützt werden sollen.
Wenn Sie nur die Auffüllung der Spalten reduzieren, wird dies nicht der Trick sein, da Sie die Breite der Seite vergrößern und sie mit dem Rest Ihrer Seite, z. Sie müssen den negativen Rand in der Zeile gleichermaßen reduzieren. Nimm das Beispiel von @martinedwards:
.row-no-padding {
margin-left: 0;
margin-right: 0;
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
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 können Sie in HTML verwenden
.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides
Sicher, Sie können nur die Deklarationen mit einschließen, die Sie benötigen.
fügen Sie einfach "no-padding" hinzu. Diese Klasse ist in Bootstrap 3 integriert
Nachfolgend nur bei Bootstrap4 verfügbar
<div class="p-0 m-0">
</div>
Hinweis: .p-0 und .m-0 haben bereits bootstrap.css hinzugefügt
Eine andere Lösung, die nur möglich ist, wenn Sie Bootstrap aus ihren LESS-Quellen kompilieren, besteht darin, die Variable neu zu definieren, wodurch der Abstand für die Spalten festgelegt wird.
Sie finden die Variable in der variables.less
-Datei: Sie heißt @grid-Gutter-width
.
In den Quellen wird es so beschrieben:
//** Padding between columns. Gets divided in half for the left and right.
@grid-Gutter-width: 30px;
Setzen Sie diesen Wert auf 0, kompilieren Sie bootstrap.less
und fügen Sie den resultierenden bootstrap.css
ein. Du bist fertig. Es kann eine Alternative zur Definition einer zusätzlichen Regel sein, wenn Sie bereits Bootstrap-Quellen wie ich verwenden.
Bootstrap 4 hat hierfür eine native Klasse: Fügen Sie die Klasse .no-gutters
zum übergeordneten .row
hinzu.
[class*="col-"]
padding: 0
margin: 0
Keine der oben genannten Lösungen hat für mich perfekt funktioniert. Nach dieser Antwort konnte ich etwas schaffen, das für mich funktioniert. Hier verwende ich auch eine Medienabfrage, um dies auf kleine Bildschirme 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;
}
}
Ich denke, es ist einfacher, es einfach zu benutzen
margin:-30px;
um den ursprünglichen Wert zu überschreiben, der von bootstrap gesetzt wurde.
Ich habe es versucht
margin: 0px -30px 0px -30px;
und es hat für mich funktioniert.
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4">
<div class="widget row">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content" id="">
<div id='jqxWidget'>
<div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
<div style="clear:both;" id="listBoxB"></div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="widget row">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 362px;"></div>
</div>
</div>
</div>
Sie können dem div innerhalb der col-md-4-Klasse eine Klasse hinzufügen, und der -15px-Rand der Zeile wird die Gutter aus den Spalten ausgleichen. Gute Erklärung hier über Rinnen und Reihen in Bootstrap 3.
Bootstrap hat die Klasse .no-Gossen, die Sie dem Zeilenelement hinzufügen können.
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-12">
[YOUR CONTENT HERE]
</div>
</div>
</div>
Referenz: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options
Entfernen/Anpassen von Bootstrap Gutter mit css Reference: http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-Gutter-width/
/* remove */
.Gutter-0.row {
margin-right: -0px;
margin-left: -0px;
}
.Gutter-0 > [class^="col-"], .Gutter-0 > [class^=" col-"] {
padding-right: 0px;
padding-left: 0px;
}
/* customize */
.Gutter-6.row {
margin-right: -3px;
margin-left: -3px;
}
.Gutter-6 > [class^="col-"], .Gutter-6 > [class^=" col-"] {
padding-right: 3px;
padding-left: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row Gutter-6">
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="thumbnail">
<img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>more</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Wickeln Sie Ihre Spalten in eine .row und fügen Sie diesem Div eine Klasse namens "no-Gutter" hinzu.
<div class="container">
<div class="row no-Gutter">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
</div>
Fügen Sie anschließend den 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;
}
Entfernen Sie den Abstand von den s/w-Spalten mit Bootstrap 3.7.7 oder weniger.
.no-Gutter ist eine benutzerdefinierte Klasse, die Sie Ihren Zeilen-DIVs hinzufügen können
.no-Gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Wenn Sie Bootstrap mit den SASS-Dateien herunterladen, können Sie die Konfigurationsdatei mit einer Einstellung für den Spaltenrand bearbeiten und dann speichern. Auf diese Weise berechnet der SASS die neue Spaltenbreite
Bootstrap 3 hat seit Version 3.4.0 eine offizielle Methode zum Entfernen der Auffüllung: die Klasse row-no-gutters
.
Beispiel aus der Dokumentation :
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Sie können eine neue Klasse zum Entfernen des Randes erstellen und auf das Element anwenden, an dem Sie einen zusätzlichen Rand entfernen möchten:
.margL0 { margin-left:0 !important }
! Important : Es hilft Ihnen, die Standardmarge zu entfernen oder den aktuellen Margenwert zu überschreiben
und auf das div anwenden, aus dem der Rand von der linken Seite entfernt werden soll
Aufbauen auf die Antwort von Vitaliy Silin . Es werden nicht nur Fälle behandelt, in denen keine Polsterung gewünscht wird, sondern auch Fälle, in denen Polsterungen in Standardgröße vorliegen.
Sehen Sie die Live-Konvertierung dieses Codes in CSS auf sassmeister.com
@mixin padding($side, $size) {
$padding-size : 0;
@if $size == 'xs' { $padding-size : 5px; }
@else if $size == 's' { $padding-size : 10px; }
@else if $size == 'm' { $padding-size : 15px; }
@else if $size == 'l' { $padding-size : 20px; }
@if $side == 'all' {
.padding--#{$size} {
padding: $padding-size !important;
}
} @else {
.padding-#{$side}--#{$size} {
padding-#{$side}: $padding-size !important;
}
}
}
$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
@each $current-size in $sizes-list {
@include padding($current-side,$current-size);
}
}
Dies gibt dann aus:
.padding--none {
padding: 0 !important;
}
.padding--xs {
padding: 5px !important;
}
.padding--s {
padding: 10px !important;
}
.padding--m {
padding: 15px !important;
}
.padding--l {
padding: 20px !important;
}
.padding-top--none {
padding-top: 0 !important;
}
.padding-top--xs {
padding-top: 5px !important;
}
.padding-top--s {
padding-top: 10px !important;
}
.padding-top--m {
padding-top: 15px !important;
}
.padding-top--l {
padding-top: 20px !important;
}
.padding-right--none {
padding-right: 0 !important;
}
.padding-right--xs {
padding-right: 5px !important;
}
.padding-right--s {
padding-right: 10px !important;
}
.padding-right--m {
padding-right: 15px !important;
}
.padding-right--l {
padding-right: 20px !important;
}
.padding-bottom--none {
padding-bottom: 0 !important;
}
.padding-bottom--xs {
padding-bottom: 5px !important;
}
.padding-bottom--s {
padding-bottom: 10px !important;
}
.padding-bottom--m {
padding-bottom: 15px !important;
}
.padding-bottom--l {
padding-bottom: 20px !important;
}
.padding-left--none {
padding-left: 0 !important;
}
.padding-left--xs {
padding-left: 5px !important;
}
.padding-left--s {
padding-left: 10px !important;
}
.padding-left--m {
padding-left: 15px !important;
}
.padding-left--l {
padding-left: 20px !important;
}
Sie können Ihr Bootstrap-Grid-System anpassen und ein benutzerdefiniertes responsives Grid definieren.
Ändern Sie Ihre Standardwerte für die folgende Rinnenbreite von @grid-Gutter-width = 30px
in @grid-Gutter-width = 0px
.
(Die Rinnenbreite wird zwischen den Spalten aufgefüllt. Sie wird für links und rechts in zwei Hälften geteilt.)
Manchmal verlieren Sie möglicherweise die Auffüllung der Spalten. Sie bleiben am Ende zusammen. Um dies zu verhindern, können Sie die Klasse wie folgt aktualisieren:
<div class="col-md-3 NoPaddingForChildren">
<div class="col-md-6">
<label>Id</label>
<input ng-model="ID" class="form-control">
</div>
<div class="col-md-6">
<label>Value</label>
<input ng-model="Val" class="form-control">
</div>
</div>
und 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;
}
<style>
.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;
}
</style>
Sie können Less Mixins mit Bootstrap erstellen, um die Ränder und Auffüllungen Ihrer Spalten zu verwalten, z. B..
http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/
Verwendungszweck:
xs-padding-lr-15px//left right both
xs-padding-l-15px
xs-padding-r-15px
Auf ähnliche Weise können Sie für das Setzen von Margin/Padding Null verwenden,
xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
sie können Gabel verwenden
gem "bootstrap", github: "srghma/bootstrap-rubygem-without-Gutter"