Bootstrap je jedan od najbržih načina za pokretanje projekta. Biblioteka uključuje mnoštvo korisnih klasa CSS uslužnih programa kako bi se brzo pokrenuo i reagirao prvi mobilni izgled.
Ali što ako počnete dodavati vlastita CSS pravila u miks, ali čini se da ona nemaju utjecaja na izgled? Je li to Bootstrap koji prepisuje vaše stilove? Ili nešto drugo?
Na primjer, recimo da želite povećati visinu reda, a također promijeniti veličinu i sliku.
Evo vašeg HTML-a:
freecodecamp Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron I CSS:
#divheight { heights: 120px; } img { width: 50px; height: 50px; } Problem je u tome što je iz nekog razloga visina retka 50px poput slike, a ne 120px:
Riješenje
Postoji nekoliko razloga zbog kojih se to događa. Prvo, jeste li primijetili gornju grešku u kucanju?
Popravite to i vaš CSS izgledat će ovako:
#divheight { height: 120px; } img { width: 50px; height: 50px; }Ali vaš redak i dalje nije 120 piksela. Ako pregledate #divheight, vidjet ćete da je nešto manje od 120 piksela:
Umjesto ciljanja #divheight, pređite na sljedeći divelement i ciljajte klasu row:
.row { height: 120px; } img { width: 50px; height: 50px; }Tada će redak biti 120 piksela kao što očekujete:
