Bootstrap-Zeilenhöhe

Bootstrap ist eine der schnellsten Möglichkeiten, ein Projekt zu booten. Die Bibliothek enthält viele hilfreiche CSS-Dienstprogrammklassen, mit denen ein reaktionsschnelles, mobiles Erstlayout schnell eingerichtet und ausgeführt werden kann.

Was aber, wenn Sie anfangen, Ihre eigenen CSS-Regeln zum Mix hinzuzufügen, diese jedoch keinen Einfluss auf das Layout zu haben scheinen? Überschreibt Bootstrap Ihre Stile? Oder etwas anderes?

Angenommen, Sie möchten die Höhe einer Zeile erhöhen sowie die Größe und das Bild ändern.

Hier ist dein HTML:

 freecodecamp Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron 

Und CSS:

#divheight { heights: 120px; } img { width: 50px; height: 50px; } 

Das Problem ist, dass aus irgendeinem Grund die Höhe der Zeile 50 Pixel wie das Bild beträgt, nicht 120 Pixel:

Lösung

Es gibt mehrere Gründe, warum dies geschieht. Haben Sie zuerst den obigen Tippfehler bemerkt?

Beheben Sie das und Ihr CSS sieht folgendermaßen aus:

#divheight { height: 120px; } img { width: 50px; height: 50px; }

Aber deine Zeile ist immer noch nicht 120px. Wenn Sie inspizieren #divheight, werden Sie feststellen, dass es knapp 120px ist:

Anstatt zu zielen #divheight, gehen Sie zum nächsten divElement und zielen Sie auf die Klasse row:

.row { height: 120px; } img { width: 50px; height: 50px; }

Dann wird die Zeile 120px sein, wie Sie es erwarten: