wake-up-neo.com

Entfernen Sie die Auffüllung aus den Spalten in Bootstrap 3

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.

csstwitter-bootstraphtml
300
kexxcream

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;
}
413
MackieeE

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.

165
martinedwards

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;
  }
}
41
phoeb

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.

22
Vitaliy Silin

fügen Sie einfach "no-padding" hinzu. Diese Klasse ist in Bootstrap 3 integriert

16
bhargav

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

9
Ali Göksel Bektaş

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.

9
link

Bootstrap 4 hat hierfür eine native Klasse: Fügen Sie die Klasse .no-gutters zum übergeordneten .row hinzu.

7
Guillaume Gautier
[class*="col-"]
  padding: 0
  margin: 0
6
Sharpless512

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;
    }
}
3
rlv-dan

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.

2
Basheer
<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.

2
1Bladesforhire

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

1
Kelly Baker

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>

1
haryx8

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;
}
1
Chi

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;
    }
1
Super Model

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 

0
TheCrazyProfessor

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>
0
Smi

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

0
Udit Bansal

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;
}
0
Adrien Be

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.)

0
Rafiqul Islam

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;
}
0
Mahesh
<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>
0
Sreelakshmi

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
0
Mohan Dere

sie können Gabel verwenden

https://github.com/srghma/bootstrap-rubygem-without-Gutter/commit/8e42c16dcc2f132af3489c2275dd7460b524d437

gem "bootstrap", github: "srghma/bootstrap-rubygem-without-Gutter"
0
srghma