Entfernen Sie 1px Lücke bei der Verwendung von display: flex mit Bootstrap

8

In einigen Browsern, z. B. Safari 9, hinterlässt das folgende Bootstrap-Grid eine Lücke von 1 Pixel auf beiden Seiten des Elements row . Warum ist das so?

%Vor% %Vor%
    
greener 14.10.2014, 14:53
quelle

1 Antwort

14

Die Lücke wird durch die Clearfix-Lücke - content: " " - verursacht, die auf Pseudoelementen der Klasse bootstrap .row liegt.

Um die Lücke zu vermeiden:

  1. Entfernen Sie die Klasse "row" sowie die Klasse "containers" der Eltern

oder

  1. Entfernen Sie das Clearfix-Pseudoelement mit:
%Vor%

Hinweis: Das Platzieren von "div" vor dem Klassenselektor - .vertical-align - verhindert die Notwendigkeit von !important

Die zwei Beispiele

Ohne Entfernen der Zeilenklasse

%Vor% %Vor%

Mit dem Entfernen der Zeilenklasse.

Die Klasse - .container - muss ebenfalls entfernt werden.

%Vor% %Vor%
    
misterManSam 14.10.2014, 15:04
quelle

Tags und Links