Bootstrap irritiert meine DIVs

    Hallo an alle,


    ich habe mir soeben einen responsive Footer gebastelt und dabei festgestellt, dass bei jedem DIV ein padding-bottom drinzusein scheint.

    Ich habe auch schon festgestellt, dass es am eingebundenen Bootstrap liegt, das ich später für ein Carousel verwenden möchte.

    Versucht habe ich schon, ein padding-bottom:0px; an alles mögliche dranzuhängen, das scheint es aber wohl nicht zu sein.

    Weiß da jmd Rat?


    Ihr seht es ganz gut am unteren Rand der DIVs des Footers. Das betrifft bei mir jetzt aber nur die footer-left, footer-center und footer-right Klassen und offenbar nicht alle DIVs.

    https://mariposa.beautiful-dreaming.net/


    Danke!

    Elly

    Weisst du wie die Entwicklerkonsole des Browsers funktioniert? Dort kannst du nachschauen, was der Verursacher für ein gewisses Phänomen ist.


    In Deinem Fall gibt Bootstrap einem <p>-Element margin-bottom: 1rem und das verursacht diesen Abstand.

    Toller Tipp, danke! Ich weiß zwar, wo ich die Konsole finde, habe aber noch nie mit ihr gearbeitet.

    Aber ich hab's gefunden. _reboot.scss macht das.

    Das erleichtert so einiges! :)


    Da wäre ich allerdings nicht drauf gekommen, da ich meine main.css nach Bootstrap lade und in der main.css habe ich für alles margin 0 definiert... Das sollte doch eig auch die Bootstrap-Stile überschreiben...dachte ich.

    Zitat

    Ich habe auch schon festgestellt, dass es am eingebundenen Bootstrap liegt, das ich später für ein Carousel verwenden möchte.

    Wenn Du Bootstrap nur für das Carousel verwenden willst, dann lass es doch bei den übrigen Elementen außen vor, indem Du die betr. Klassen weg lässt, beim Footer das class="footer-resp". Allerdings hilft das nicht beim p-Element, da Bootstrap dieses ohne Klasse umgestaltet.


    Generell lässt sich Bootstrap nur sinnvoll einsetzen, wenn man das Layout so akzeptiert, wie es dadurch vorgegeben ist. Möchte man individuelle Vorstellungen umsetzen, ist es einem nur im Wege.

    Zitat
    Da wäre ich allerdings nicht drauf gekommen, da ich meine main.css nach Bootstrap lade und in der main.css habe ich für alles margin 0 definiert... Das sollte doch eig auch die Bootstrap-Stile überschreiben...dachte ich

    Die Erklärung dafür, dass es das nicht tut, findest Du hier:

    https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade#:~:text=In%20CSS%20werden%20Regelsätze%20nach,mit%20dem%20Startwert%20Null%20festgelegt.

    Du könntest folgendes machen:

    Code
    <p class="mb-0">

    Bootstrap ist halt ein Monstrum. Wenn du den Rest der Seite ohne Bootstrap aufgebaut hast würde ich vielleicht ein Carousel verwenden, welches ohne Bootstrap auskommt.

    Ich habe dann margin:0px; geschrieben, so geht's.


    Die Klasse footer-resp habe ich so benannt. Gibt's die denn in Bootstrap auch? Ich kann die ja nochmal umbenennen. Die hieß im Tutorial anders (footer-destributive oder so) und ich dachte erst, der Fehler kommt daher, da eben das in Bootstrap vl existiert.


    Das gute Ding geht einem tatsächlich öfter mal im Weg um, aber irgendwie ist es auch gut, wenn es verlinkt es, so sieht man wenigstens, wo man ggf. mal Probleme haben könnte.

    Zitat von Sempervivum

    Die Erklärung dafür, dass es das nicht tut, findest Du hier:

    https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade#:~:text=In%20CSS%20werden%20Regelsätze%20nach,mit%20dem%20Startwert%20Null%20festgelegt.

    Das mit den Kaskaden und der Reihenfolge ist mir bewusst. Dachte ich jedenfalls. "Wird eine Eigenschaft mehrfach deklariert, so gilt in der Regel der zuletzt festgelegte Wert." Eben deshalb dachte ich, da ich die main.css nach Bootstrap lade, gilt das margin:0px; von dort. Mit !important sollte das dann eigentlich gehen. Muss ich ausprobieren.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden