Bootstrap sor magassága

A Bootstrap az egyik leggyorsabb módja a projekt indításának. A könyvtár rengeteg hasznos CSS segédosztályt tartalmaz, hogy gyorsan reagálhasson az első mobilos elrendezésre.

De mi van akkor, ha elkezdi hozzáadni a saját CSS-szabályait a keverékhez, de úgy tűnik, hogy ezek nem befolyásolják az elrendezést? A Bootstrap írja felül a stílusaidat? Vagy valami más?

Tegyük fel például, hogy meg akarja növelni egy sor magasságát, átméretezni és képezni is.

Itt van a HTML:

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

És CSS:

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

A probléma az, hogy valamilyen okból a sor magassága 50 képpont, mint a kép, nem 120 képpont:

Megoldás

Ennek pár oka van. Először is észrevette a fenti elgépelési hibát?

Javítsa ki, és a CSS így fog kinézni:

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

De a sorod még mindig nem 120px. Ha megvizsgálja #divheight, látni fogja, hogy ez alig van 120 képpont alatt:

Célzás helyett #divheightmenjen le a következő divelemre, és célozza meg az osztályt row:

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

Ekkor a sor 120 képpontos lesz, mint amire számítottál: