Слово от мудрых (а не я), никогда не используйте встроенный стиль. Всегда ставьте все в CSS. Кроме того, вы устанавливаете определенную высоту как для синего квадрата, так и для светло-зеленого окна. Поэтому, даже если браузер более узкий и будет находиться в зоне col-sm- * и col-xs- *, вы все равно будете иметь заданную высоту. Вы должны указать имя класса, например height-height, а затем в CSS написать что-то вроде следующего:
.form-height {
height: 150px; /* Or whatever height you find appropriate */
}
@media (min-width:768px) {
.form-height {
height: 74px;
}
}Что бы это могло сделать, так это сказать, что, когда браузер более узкий, чем 768px, то есть когда он считается col-xs- * при загрузке, он должен иметь определенную высоту. Когда он будет больше, он будет иметь разную высоту.
Однако всегда лучшее решение - никогда не использовать свойство высоты. Причина, по которой вы это делаете, вероятно, потому, что вам нужно определенное дополнение. Поэтому вы можете написать следующий CSS для класса:
.form-height {
padding: 10px 0px; /* Give the top and bottom 10px of padding and nothing to the right or left */
}