2016-08-29 6 views
-3

Ich mache eine Website mit Twitter Bootstrap und ein Problem bei der Größenanpassung der Browserfenster. Ich habe versucht mit width und height für beide div s, sowie das Kind divposition: absolute; und Eltern divposition: relative;, vergeblich.Divs überlappen beim Ändern der Größe von Fenster

Dies ist der Code

source code

Das Element I durch PHP (eine Karte) gezogen zu zeigen, ich versuche, und das ist, wie es überlappt.

map overlaps div

Ich weiß, ich sollte nicht das Styling im HTML tun, aber ich wollte Sie die Details an einem Ort zeigen.

+0

Willkommen bei StackOverflow. Lesen Sie, wie Sie ein minimales, vollständiges und überprüfbares Beispiel erstellen können: http://stackoverflow.com/help/mcve. –

+0

Vielen Dank für die Bearbeitung und Korrektur der Rechtschreib- und Grammatikfehler, mir war nicht bewusst, dass es genau richtig sein sollte. Jedenfalls habe ich keinen ähnlichen Code zur Verfügung gestellt, da ich nicht sicher bin, wie ich das hier noch machen soll, da ich mit Twitter Bootstrap arbeite, gibt es auch PHP-Elemente, die eine signifikante Auswirkung auf das Problem haben können, denke ich. – Mar1ak

+0

Kein Problem. Sehen Sie sich die Hilfebereiche hier auf der Website an und klicken Sie auf das Fragezeichen oben rechts im Textbereich fragen/bearbeiten/beantworten, um zu erfahren, wie Sie Code und Zeug formatieren können. Erinnere dich nur an die genaueren und klareren Informationen, die du gibst, je mehr Leute mit deinem Problem helfen wollen (allgemein). Auch, nie Screenshot-Code - immer kopieren und fügen Sie es in einen Codeblock. –

Antwort

-1

Durch was ich aus dem Bild von Code erhalten kann, die Sie gebucht haben, verschachteln Sie Ihr div in der falschen Reihenfolge, die Klasse Panel-Footer soll die Fußzeile eines Panels sein, Panel-Körper ist, was soll zwischen Panel-Panel und Panel-Footer oder mit anderen Worten innerhalb des Panels selbst sein. Ich würde auch vorschlagen, dem Element, das Sie über PHP wiedergeben, eine Klasse zu geben, bitte posten Sie mehr von Ihrem Code und ich werde Ihnen gerne weiterhelfen. Weitere Dokumentation zu Bootsrap-Panels finden Sie unter here. Normalerweise verwende ich Panels, um Formularknöpfe zu speichern, keine Bilder. Ich würde dies als Kommentar hinterlassen, kann aber immer noch nicht überall kommentieren.

+1

Warum wurde das abgelehnt ?! Vielen Dank Herr, Ihr Kommentar hat mir geholfen, das Problem zu lösen. Über die Panel-Footer-Klasse, glaube ich, dass die eine codiert es dachte, dass das Styling des div wird gleich sein, unabhängig davon, Panel-Fußzeile oder Panel-Überschrift verwenden. Ich möchte mich nicht damit anfreunden, wenn er irgendein anderes Styling durch CSS oder so gemacht hätte ... Aber ja, ich war in der Lage, die Karte mit den Klassen embed-responsive embed-responsive-16by9 zu skalieren für Ihren Luxus, falls Sie neugierig sind @del cueto https://i.gyazo.com/b384c02a1d890ae4dea20bf93eaec7c5.png – Mar1ak

+0

Die Antworten werden normalerweise abgelehnt, wenn sie nicht die genaue Antwort liefern, und wir werden ermutigt, keine Antworten mit Links zur Dokumentation zu hinterlassen, daher sollten wir nicht auf Fragen antworten, die nicht gut dokumentiert sind. Ich bin froh, dass Sie Ihren Weg finden, Ihr Problem zu lösen. Ich werde den Link vollständig überprüfen, sobald ich das private Netzwerk meiner Arbeit verlassen habe. –

1

konnte ich die Karte erhalten, ohne Überschneidungen zu skalieren, indem die beiden Klassen, die mit Twitter Bootstrap kommen,

genannt
embed-responsive embed-responsive-16by9 

und das ist ihr Quellcode

.embed-responsive { 
    position: relative; 
    display: block; 
    height: 0; 
    padding: 0; 
    overflow: hidden; 
} 

    .embed-responsive-16by9 { 
    padding-bottom: 56.25%; 
} 

Auch wenn ich versuchte, meine div s zu einem Elternteil mit position: relative; und Kind von jeder Positionierung zu machen, hat es nicht funktioniert, so denke ich, es geht um die Höhe und Polsterung. Vielen Dank für Ihre Antwort, und ich hoffe, diese Antwort hilft mehr Menschen.

Verwandte Themen