it-swarm.com.de

Wie verhindert man das horizontale Scrollen auf einer responsiven Webseite?

Ich verwende Twitter-Bootstrap, um meine App ansprechbar zu machen. Wenn ich die Breite meines Browserfensters auf die minimale Größe verkleinere oder die Seite auf einem mobilen Gerät (z. B. iPhone) sehe, kann der Benutzer horizontal scrollen. Die Menge an horizontalen Blättern ist gering, aber ich möchte sie alle zusammen entfernen.

Ich glaube, es liegt an dem img-Container, den ich einschließe, aber ich bin nicht hier. Die HTML-Seite der Seite befindet sich hier: http://Pastebin.ca/2347946 .

Irgendwelche Ratschläge, wie Sie den horizontalen Bildlauf für die Seite verhindern und gleichzeitig den Bildlauf im img-Container beibehalten können?

13
sharataka

ich bin mir ziemlich sicher, dass eines Ihrer untergeordneten Elemente die Breite des übergeordneten Elements überschreitet. Überprüfen Sie den Code zweimal, wenn die Größe der inneren untergeordneten Elemente aus einem der folgenden Gründe groß ist: Wenn die Breite der Box einschließlich margin, padding, border das Limit überschreitet. Und möglicherweise haben wir overflow: hidden; nicht zu seinem äußeren übergeordneten Element hinzugefügt. In diesem Fall wird davon ausgegangen, dass sie über ihr übergeordnetes Element hinausreichen und von Browsern mit der Bildlaufleiste angezeigt werden. Beheben Sie das Problem, indem Sie zusätzliche Ränder, Polsterungen, Ränder entfernen. Wenn Sie keine Kopfschmerzen haben möchten, versuchen Sie, overflow:hidden; in die äußere Box einzufügen.

14

Ich hatte das gleiche Problem und habe dies angewendet, um das Problem zu beheben:

body {
    overflow-x: hidden !important;
}
.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

Um etwas zu erweitern, hatte ich das Problem nur auf Mobiltelefonen, daher ist dies mein endgültiger Code:

@media screen and (max-width: 667px) {
    body {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

Ich habe die Probleme diesbezüglich auf Github gefunden. Ich vermute, dass neuere Versionen von Bootstrap gepatcht wurden.

14
Nino Škopac

Versuchen Sie, in dem entsprechenden @-rule einen max-width hinzuzufügen:

img {
    max-width: NNNpx;
}

Das verhindert, dass img zu breit wird.

0
FelipeAls

Der "Überlauf: versteckt"; Stil ist das Mittel, nicht die Prävention. Wenn Sie dies verhindern möchten, müssen Sie Ihre Körperelemente überprüfen, die größer als der Körper sind. Dies geschieht, wenn Sie ein Div mit etwas "padding" oder "margin" außerhalb ".container" (Twitter) machen bootstrap) . Entfernen Sie also alle Auffüllungen und Ränder außerhalb der Containerklasse.

0
Motahar Hossain