Wie entferne ich Leerzeichen zwischen Bootstrap-Spalten?

7

Ich möchte den Abstand zwischen mehreren Spalten im Bootstrap-Raster entfernen. Wie können wir Bootstraps CSS überschreiben, um diese Aufgabe oder eine andere bessere Lösung mit reinem CSS zu erreichen?

main.html

%Vor%     
hussain 26.10.2016, 16:02
quelle

10 Antworten

17

fügen Sie eine Klasse hinzu, wenn Sie Leerzeichen entfernen müssen

%Vor%

in HTML schreibe diese Klasse

%Vor%     
Morteza Negahi 26.10.2016, 16:04
quelle
10

Sie können eine Klasse no-gutter für Ihre row erstellen und die von bootstrap hinzugefügte margin / padding entfernen, wie in dieser Beitrag :

%Vor% %Vor%

Ich habe einen grauen Hintergrund und eine Grenze für Demonstrationszwecke gesetzt. Beobachten Sie das Ergebnis im Vollbildmodus, um zu sehen, dass zwischen den Spalten kein Platz mehr ist. Weitere Informationen zum vordefinierten Rand und Padding in Bootstrap finden Sie hier .

    
andreas 26.10.2016 16:05
quelle
2

In den Spalten gibt es eine 15px-Füllung auf jeder Seite, wenn Sie entfernen, sollten sie zusammen sitzen.

%Vor%

Dieses Snippet stammt aus modifiziertem Code, der in grid-framework.less gefunden wurde.

    
Ginger Squirrel 26.10.2016 16:07
quelle
1

Ich würde der Zeile eine Klasse hinzufügen und die Spalten-Children mit einem nachgeordneten Platzhalter-Selektor targetieren:

HTML:

%Vor%

CSS:

%Vor%     
David Wilkinson 26.10.2016 16:06
quelle
1

Wenn Sie LESS verwenden, können Sie Snippet verwenden und auf die Zeile anwenden.

%Vor%

Wenn normal CSS

%Vor%

Wie so:

%Vor%     
Birksy89 26.10.2016 16:06
quelle
1

In Bootstrap 4 ist die Klasse no-gutters enthalten. Kein zusätzliches CSS wird benötigt ...

%Vor%     
ZimSystem 24.02.2018 13:36
quelle
0

Die Lösung von Anshuman funktioniert tatsächlich! Es löscht die Bootstrap-Spaltenräume, wenn Sie die Füllung in den Stilen auf Null setzen, d. H. Padding: 0;

%Vor%     
Somtochukwu 01.08.2017 11:41
quelle
0

Einfach hinzufügen .no-gutter in Zeile.

Ссылка

    
Lütfü Can KAPLAN 02.11.2017 11:52
quelle
0

Im Bootstrap 4 können Sie die Klasse mx-* und px-*

hinzufügen %Vor%

Die Klassen mx-* und px-* sind im Standard-Bootstrap-Stil, Sie müssen sie also nicht manuell hinzufügen

    
vozaldi 13.02.2018 08:03
quelle
-1
%Vor%     
Anshuman Anand Shrivastava 26.10.2016 16:17
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Mehrere CGAffineTransforms in Swift 3