Висота рядка Bootstrap

Bootstrap - це один із найшвидших способів, ну, завантажити проект. Бібліотека містить багато корисних класів утиліти CSS, щоб швидко реагувати на мобільний перший макет.

Але що, якщо ви почнете додавати власні правила CSS до міксу, але, схоже, вони не впливають на макет? Це Bootstrap, який перезаписує ваші стилі? Або щось інше?

Наприклад, скажімо, що ви хочете збільшити висоту рядка, а також змінити розмір і зображення.

Ось ваш HTML:

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

І CSS:

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

Проблема в тому, що з якихось причин висота рядка становить 50 пікселів, як зображення, а не 120 пікселів:

Рішення

Є кілька причин, чому це відбувається. По-перше, ви помітили помилку вище?

Виправте це, і ваш CSS буде виглядати так:

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

Але ваш рядок досі не 120px. Якщо ви перевірите #divheight, ви побачите, що це трохи менше 120 пікселів:

Замість націлювання #divheightперейдіть до наступного divелемента та націліть клас row:

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

Тоді рядок матиме 120 пікселів, як ви очікували: