Bootstrap rækkehøjde

Bootstrap er en af ​​de hurtigste måder at starte et projekt på. Biblioteket indeholder mange nyttige CSS-hjælpeklasser for at få et responsivt, mobilt første layout i gang hurtigt.

Men hvad nu hvis du begynder at tilføje dine egne CSS-regler til blandingen, men de ser ikke ud til at have nogen indflydelse på layoutet? Er det Bootstrap, der overskriver dine stilarter? Eller noget andet?

Sig for eksempel, at du vil øge højden på en række og også ændre størrelse og billede.

Her er din HTML:

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

Og CSS:

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

Problemet er, at højden af ​​rækken af ​​en eller anden grund er 50px som billedet, ikke 120px:

Opløsning

Der er et par grunde til, at dette sker. For det første bemærkede du skrivefejlen ovenfor?

Løs det, og din CSS vil se sådan ud:

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

Men din række er stadig ikke 120 px. Hvis du inspicerer #divheight, kan du se, at det er lige under 120 pixel:

I stedet for at målrette #divheightskal du gå ned til det næste divelement og målrette mod klassen row:

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

Derefter er rækken 120 px som du forventer: