Btn-group, накладывающаяся на изменение размера окна (меньше)

Question

Btn-group, накладывающаяся на изменение размера окна (меньше)

0

Я делаю угловое приложение с HTML и CSS и имею форму с группой кнопок (3 кнопки горизонтально выровнены). Однако, когда я делаю окно меньше, кнопки складываются поверх других.

Это класс = "list-unstyled btn-group" внутри класса = "form-group". Как изменить размер кнопок, чтобы они были горизонтальными?

Tricode 30 июнь 2015, в 19:07

Источник

Теги:

html

angularjs

css

1 ответ

Ещё вопросы

Nikhil Aggarwal · Accepted Answer · 2015-06-30T15-43-00.000Z

Стек кнопок, поскольку требуемое пространство больше свободного места. Следовательно, вам нужно убедиться, что в меньших окнах доступное пространство должно быть более чем равным требуемому пространству

Вы можете достичь этого, следуя подходам.

Используйте медиа-запросы.

@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 (если требуется)

Я тоже использую бутстрап. Кстати, куда мне положить @media?
Медиа-запросы - это ваша CSS. Добавьте к CSS таблицы стилей, добавленные на странице. Кроме того, если вы используете, а затем перепроверьте свою структуру, большинство проблем будет исправлено путем изменения структуры.
Хорошо. Где я могу связать носитель с названием класса, который он будет использовать?
Вам не нужно связывать СМИ. Просто добавьте свой стиль в этом блоке. Например, р {цвет: красный}
Но что становится красным? Например, мы используем имена классов, чтобы связать «что» станет красным. Итак, мы добавляем имена классов внутри тега @media?
Я обновил ответ с примером. Пожалуйста, проверьте.
Большое спасибо, теперь я понимаю ..... Однако я только что понял, что размер моего окна не то, что бросает мне вызов. Это размер модала. У меня есть модал с btn-group внутри. Укладка кнопок происходит только тогда, когда окно достаточно закрыто, поэтому окно заставляет модал становиться меньше. Как бы я справился с этим?
Ну, не глядя на код, я не смогу вам в этом помочь. Было бы здорово, если вы разместите свой код в блоке редактирования в этом вопросе или вы также можете опубликовать новый вопрос.