entfernen oberen Rand für <body> in kleineren Bildschirmgrößen - Bootstrap 4

Ich bin mir nicht sicher, ob ich Recht habe oder nicht. Ich habe eine Webseite mit Bootstrap 4 erstellt. Nach vielen Optimierungen werden alle Seitenelemente wie erwartet gerendert. Aber, in kleineren Bildschirmen scheint es, als ob die <body>top-margin hat, die einige meiner Elemente mit position: absolute drückt. Ich habe versucht, die CSS-Datei durchzugehen, habe aber keinen solchen Code gefunden. Es ist das letzte bisschen in meinem Code übrig.entfernen oberen Rand für <body> in kleineren Bildschirmgrößen - Bootstrap 4

Mein Fiddle:http://jsfiddle.net/chandannadig/3kjdo9rr/10/

haben Sie einen Blick auf die Screenshots zum besseren Verständnis. Ich habe meinen Mauszeiger auf die <body> in meinen Google Chrome Developer Tools platziert.

große Bildschirme

Small Screen (iPhone 6S Portrait)

Quelle

2016-07-11 Chandan D Nadig

Die Demo ist nicht‘ganz, was Sie zeigen, aber es gibt eine Lücke. Es ist das Element und die Klasse .pad, die Rand hat: 4rem 1.5rem 1rem 1.5rem; wenn Sie es in den Rand ändern: 3rem 1.5rem 1rem 1.5rem; Die Lücke schließt sich.

Quelle

2016-07-11 15:58:17

Das funktioniert. Vielen Dank. Aber das dient nicht meinem Zweck. Es tut mir leid, dass ich das in der Frage nicht erwähnt habe. Ich möchte den Rand für .pad, aber schieben Sie die Pseudo-Elemente .clip :: after und .clip :: before wie in Screenshot 1 gezeigt. –

Es sieht für mich aus, dass diese Lücke durch den oberen Rand der .pad-Klasse verursacht wird. So ändern Sie es in etwa so:

@media screen and (max-width: 768px) { 
.pad { 
    margin: 0 1.5rem 1rem 1.5rem; 

}

Quelle

2016-07-11 16:05:50 rkubo

Bitte beachten Sie meinen Kommentar zu Glenn Packer's Antwort. Ich versuche, das genaue Design zu behalten. –

entfernen oberen Rand für <body> in kleineren Bildschirmgrößen - Bootstrap 4

Antwort

Verwandte Themen