Ränder zwischen den Spalten des Bootstrap Grid funktionieren nicht

8

Ich erstelle eine Seite im Bootstrap, in der ich 4 Spalten innerhalb einer Zeile verwende. Der Code:

%Vor%

Ich habe jeder Spalte eine Klasse hinzugefügt, so dass jeder einen Rahmen haben kann.

%Vor%

Das Problem ist, dass die Ränder durch die natürliche Rinne des Bootstrap-Gitters getrennt sein sollten und das nicht funktioniert.

Könnten Sie mir bitte helfen? Vielen Dank.

    
Mauro Barrionuevo 29.09.2014, 16:34
quelle

4 Antworten

16

Sie müssen ein anderes Blockelement (dh; DIV) innerhalb der Spalten verwenden, da Bootstrap 'col- *' Padding verwendet, um den Abstand oder "Gutter" zwischen den Rasterspalten zu erzeugen.

%Vor%

Demo: Ссылка

    
ZimSystem 29.09.2014, 17:11
quelle
6

Sie können outline -Eigenschaft verwenden. NO cliente div wird benötigt.

%Vor%     
Carlos Macias 14.03.2015 18:46
quelle
1

Ich habe eine Version gemacht, die keine zusätzlichen Elemente benötigt, aber möglicherweise ungleiche Höhen hat:

Wie kann ich eine Linie zwischen zwei Spalten mithilfe des Twitter Bootstraps-Grid-Systems hinzufügen

    
Ross Angus 30.03.2015 08:47
quelle
0

Um bei der Lösung outline zu expandieren, verwenden Sie box-shadow :

, wenn Sie einen Rahmen verwenden möchten, der auf die gleiche Größe reduziert wird, wenn zwei benachbarte Spalten beide Rahmen haben %Vor%

Der Nachteil von box-shadow gegenüber outline ist, dass box-shadow von jedem Browser an einer Subpixel-Position gerendert werden kann, während Umrisse und Rahmen am nächsten Pixel ausgerichtet werden. Wenn ein box-shadow an einer Subpixelposition endet, wird es weich oder unscharf angezeigt. Die einzige Möglichkeit, dies zu vermeiden, besteht darin, sicherzustellen, dass Sie keine Dinge tun, die dazu führen, dass die Spalte an einer Subpixelposition ausgerichtet wird.

    
Adam Leggett 26.05.2017 19:30
quelle