Высота строки 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; }

Но ваша строка все еще не 120 пикселей. Если вы #divheightпосмотрите, то увидите, что это чуть меньше 120 пикселей:

Вместо таргетинга #divheightперейдите к следующему divэлементу и выберите класс row:

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

Тогда размер строки будет 120 пикселей, как вы и ожидали: