Я делаю угловое приложение с HTML и CSS и имею форму с группой кнопок (3 кнопки горизонтально выровнены). Однако, когда я делаю окно меньше, кнопки складываются поверх других.
Это класс = "list-unstyled btn-group" внутри класса = "form-group". Как изменить размер кнопок, чтобы они были горизонтальными?
Стек кнопок, поскольку требуемое пространство больше свободного места. Следовательно, вам нужно убедиться, что в меньших окнах доступное пространство должно быть более чем равным требуемому пространству
Вы можете достичь этого, следуя подходам.
Используйте медиа-запросы.
@media screen and (min-width:420px) and (max-width:770px) {
// Write your styles here - reduce padding, font-size, etc
}
Например, у вас есть элемент с классом my-class и размер шрифта как 12px, а в размере экрана от 420 до 770 требуется размер шрифта как 10px. Тогда css будет выглядеть
.my-class {
font-size : 12px;
}
@media screen and (min-width:420px) and (max-width:770px) {
.my-class {
font-size : 10px;
}
}
Использовать фреймворки css, такие как bootstrap - http://getbootstrap.com/
Также можно использовать javascript (если требуется)