Entfernen Sie die Auffüllung von Spalten in Bootstrap 3

342

Problem:

Entfernen Sie die Polsterung / den Rand rechts und links von col-md- * in Bootstrap 3.

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 Ausgabe:

Derzeit fügt dieser Code rechts und links von den beiden Spalten einen Abstand / Rand hinzu. Ich frage mich, was mir fehlt, um diesen zusätzlichen Platz 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.

css  twitter-bootstrap  html 
— kexxcream
quelle
1
Für Bootstrap 4 verwenden Sie pl-0 pr-0dh<div class="col-7 pl-0 pr-0">
— Muhammad Shahzad

Antworten:

454

Normalerweise würden Sie .rowzwei Spalten umbrechen, nicht .col-md-12- das ist eine Spalte, die eine andere Spalte einschließt. Immerhin hat .rowes nicht die zusätzlichen Ränder und Auffüllungen, die a col-md-12bringen würde, und reduziert auch den Platz, den eine Spalte mit negativen linken und rechten Rändern einführen würde.

<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 die Auffüllungen / Ränder wirklich entfernen möchten, fügen Sie eine Klasse hinzu, um die Ränder / Auffüllungen für jede untergeordnete Spalte herauszufiltern.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
— MackieeE
quelle
Ist das Hinzufügen von .without-padding zur Containerklasse überhaupt erforderlich? Ich würde sagen, dass das Hinzufügen von .nopadding zum .col-md-8 div mit dem von Ihnen angegebenen CSS-Code ausreichend ist.
— Charles Ingalls
59
Normalerweise erstelle ich 3 zusätzliche Klassen in meinem benutzerdefinierten CSS, nämlich .padding-0das linke und rechte Auffüllen (nur) auf 0; .padding-smDadurch wird .padding-mddie Polsterung auf 2 Pixel und die Polsterung auf 5 Pixel festgelegt. Die übliche Polsterung beträgt 15 Pixel (sofern nicht anders angegeben), daher sind diese zusätzlichen Klassen ausreichend.
— MichaelJTaylor
durch die Art und Weise .row es die neue Linie bewegt
— ozanmuyes
6
Die übliche Polsterung wird in Variablen angepasst .less @ grid-gutter-width: 30px;
— Vladislav Lezhnev
6
Gibt es einen vordefinierten Bootstrap, um Polster zu entfernen oder eine Klasse zu erstellen, ist nur eine Lösung
— Gaurav Aggarwal
186

Bootstrap 4 hat .no-guttersKlasse hinzugefügt .

Bootstrap 3 : Ich füge diesen Stil immer meinem Bootstrap LESS / SASS hinzu:

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

Dann können Sie im HTML schreiben:

<div class="row row-no-padding">

Wenn Sie nur auf die untergeordneten Spalten abzielen 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;
}

Möglicherweise möchten Sie die Polsterung auch 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 Sie möchten, dass kleine Geräte abwärts unterstützt werden.

— martinedwards
quelle
10
Dies ist einfaches CSS, abgesehen von der Verschachtelung (die auch in SASS enthalten ist), daher sollte es genauso funktionieren.
— Martinedwards
4
Ich schlage vor, die direkte Kinderauswahl zu verwenden, um die Leistung zu verbessern. Verwenden Sie & >[class*="col-"]stattdessen.
— John Wu
3
@ JohnWu, das auch verhindert, dass verschachtelte Zeilen den Stil erben, was mir ein wenig Probleme bereitete. Vielen Dank!
— Troy Carlson
2
Sie sollten [class^="col-"], [class*=" col-"] {...}stattdessen wirklich verwenden, damit Sie nicht versehentlich foocol-auf beispielsweise benannte Klassen abzielen . Dies zielt auf Elemente ab, die diesen Klassennamen am Anfang haben oder ihn auch als sekundäre Klasse haben, ohne darauf abzuzielen, wo die Zeichenfolge als Teil eines anderen Klassennamens gefunden wird.
— Brett
1
Heiliger Rauch! Ich habe nur stundenlang mit einem Fehler im iOS-Ansichtsfenster gekämpft, weil mein iPhone 6 manchmal (aber uneinheitlich) automatisch auf meine Webseite zoomte. Nach dem Entfernen der Col-Polsterung funktioniert der Autozoom meiner Meinung nach ordnungsgemäß! Vielen Dank!
— Ryan
45

Das Reduzieren nur des Auffüllens der Spalten reicht nicht aus, da Sie die Breite der Seite vergrößern und sie mit dem Rest Ihrer Seite ungleichmäßig machen, z. B. Navigationsleiste. Sie müssen den negativen Rand in der Zeile gleichermaßen reduzieren. Nehmen wir das WENIGER Beispiel von @martinedwards:

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
— Phoeb
quelle
Dies ist nur dann ein Problem, wenn sich Ihre Zeile nicht in einem Container oder einer anderen Spalte befindet. Die negativen Ränder gleichen nur die Polsterung dieser Elemente aus
— Fred Stark
Ich brauchte !importantbeide Ränder, um diese Arbeit zu machen
— Philip Bijker
22

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

Natürlich können Sie nur die Deklarationen einschließen, die Sie benötigen.

— Vitaliy Silin
quelle
Ich versuche, dieses Mixin (danke dafür) in dieser Situation zu verwenden und die Polsterung funktioniert nicht. .banners-home { @include make-row(); .banner-comprar,.banner-pq{ @include no-padding("all"); @include make-xs-column(6); @include make-sm-column(6); @include make-md-column(6); @include make-lg-column(6); } .banner-simulador{ @include no-padding("all"); @include make-xs-column(12); @include make-sm-column(12); @include make-md-column(12); @include make-lg-column(12); } }
— jpcmf80
Ich finde heraus, was los ist. Ich muss ein anderes Mixin erstellen, damit diese Lösung funktioniert. Übrigens, danke für das SASS-Mixin :)
— jpcmf80
Ich erstelle dies einfach @mixin nopadding{ padding:0!important; }in meinem _mixin.scss und füge @include nopadding;es dann dem obigen Code hinzu. :)
— jpcmf80
18

Im Folgenden nur bei Bootstrap4 verfügbar

<div class="p-0 m-0">
</div>

Hinweis: .p-0 und .m-0 haben bereits bootstrap.css hinzugefügt

— Ali Göksel Bektaş
quelle
15

Fügen Sie einfach "no- padding " hinzu, eine in Bootstrap 3 integrierte Klasse

— Bhargav
quelle
Funktioniert für mich beim Hinzufügen zu einer Spalte. Dies sollte verwendet werden, wenn verschachtelte Spalten verwendet werden, um Mehrfachauffüllungen zu vermeiden.
— NicolasBernier
4
Sie können no-gutterdem übergeordneten Element auch eine Klasse hinzufügen .row.
— ArtBIT
3
@ArtBIT Ich denke, Sie müssen no-guttersgemäß v4-alpha.getbootstrap.com/layout/grid/#no-gutters codieren . Es ist nicht eingebaut.
— Caltor
12

Bootstrap 4 verfügt dazu über eine native Klasse: Fügen Sie die Klasse .no-guttersdem übergeordneten Element hinzu.row

— Guillaume Gautier
quelle
10

Eine andere Lösung, die nur möglich ist, wenn Sie Bootstrap aus seinen WENIGER Quellen kompilieren, besteht darin, die Variable neu zu definieren, mit der die Auffüllung für die Spalten festgelegt wird.

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

Es wird in den Quellen so beschrieben:

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

Setzen Sie dies auf 0, kompilieren Sie bootstrap.lessund fügen Sie das Ergebnis hinzu bootstrap.css. Du bist fertig. Es kann eine Alternative zum Definieren einer zusätzlichen Regel sein, wenn Sie bereits Bootstrap-Quellen wie ich verwenden.

— Verknüpfung
quelle
6

Bootstrap 3 bietet seit Version 3.4.0 eine offizielle Methode zum Entfernen der Polsterung: die Klasserow-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>
— Smi
quelle
3

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

Entfernen Sie den Abstand von 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;
    }
— Supermodel
quelle
Dies funktionierte und erforderte weder WENIGER noch SASS. Mir ist jedoch aufgefallen, dass ich die Containerklasse zu meiner Zeile hinzufügen und dieses zusätzliche Styling anwenden musste : margin:0 auto;.
— Volomike
Entwickler müssen damit erkennen, dass sie, sobald dies erledigt ist, einen DIV innerhalb der Spalte erstellen und einen Rand darauf anwenden müssen, um ihre eigenen Rinnengrößen zu erstellen.
— Volomike
2 
<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 des col-md-4 eine Zeilenklasse hinzufügen, und der -15px-Rand der Zeile gleicht die Rinne aus den Spalten aus. Gute Erklärung hier zu Dachrinnen und Reihen in Bootstrap 3.

— 1Bladesforhire
quelle
2

Ich denke, es ist einfacher, nur zu verwenden 

margin:-30px;

um den vom Bootstrap festgelegten ursprünglichen Wert zu überschreiben.

ich habe es versucht 

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

und es hat bei mir funktioniert.

— Basheer
quelle
1

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 dann den folgenden 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;
}
— Chi
quelle
1

Entfernen / Anpassen der Bootstrap-Dachrinne mit CSS-Referenz: 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>
Erweitern Sie das Snippet

— haryx8
quelle
0

Sie können eine neue Klasse zum Entfernen von Rändern erstellen und auf das Element anwenden, bei dem Sie zusätzliche Ränder entfernen möchten:

.margL0 { margin-left:0 !important }

! wichtig : Es hilft Ihnen, den Standardrand zu entfernen oder den aktuellen Randwert zu überschreiben

und wenden Sie auf das Div an, von dem Sie den Rand von der linken Seite entfernen möchten

— Udit Bansal
quelle
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>
— Sreelakshmi
quelle
Könnten Sie bitte eine Erklärung mit Ihrer Antwort geben.
— PKirby
Geben Sie diese Codes vor oder nach dem <head> -Tag an, damit die Klasseneigenschaften auf dieser Seite
— überschrieben werden
0

Sie können Less Mixins mit Bootstrap erstellen, um Ränder und Auffüllungen Ihrer Spalten zu verwalten.

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

In ähnlicher Weise können Sie zum Festlegen des Randes / Auffüllens Null verwenden:

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— Mohan Dere
quelle
Es scheint, dass wesentliche Informationen auf der dann verlinkten Seite sind. Dies ist nicht der Weg von SO. Geben Sie wichtige Informationen in Ihre Antwort ein!
— Jogo
Oder die Leute könnten einfach die akzeptierte Antwort mit 159 Upvotes und keinen Downvotes verwenden, das ist seit zwei Jahren hier. Oder eine der mehreren anderen Antworten mit über zehn positiven Stimmen. Sie müssen sich mehr Mühe geben, um sich gegen diese Konkurrenz einen Platz auf dieser Seite zu sichern.
— Tom Zych
0

Aufbauend auf Vitaliy Silins Antwort . Dies gilt nicht nur für Fälle, in denen wir überhaupt keine Polsterung wünschen, sondern auch für Fälle, in denen wir Polsterungen in Standardgröße haben.

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

Manchmal verlieren Sie möglicherweise die gewünschte Auffüllung für die Spalten. Am Ende kleben sie aneinander. 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;
}
— Mahesh
quelle
0

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

— TheCrazyProfessor
quelle
0

Sie können Ihr Bootstrap-Grid-System anpassen und Ihr benutzerdefiniertes responsives Grid definieren.

Ändern Sie Ihre Standardwerte für die folgende Rinnenbreite von @grid-gutter-width = 30pxbis@grid-gutter-width = 0px

(Die Dachrinnenbreite wird zwischen den Spalten aufgefüllt. Sie wird links und rechts in zwei Hälften geteilt.)

— Rafiqul Islam
quelle
0

Ich bevorzuge es immer noch, die Kontrolle über jedes Padding in jeder Bildschirmgröße zu haben, damit dieses CSS für euch nützlich sein könnte :)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}
— Eryk Wróbel
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.