#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Я довольно новичок в Bootstrap, и у меня есть некоторые проблемы с моим мобильным представлением:
Ссылка: http://bit.ly/1yYmgvI
Теперь, очевидно, в мобильном представлении беспорядок. Я рассмотрю пару проблем, с которыми я сталкиваюсь:
- Выпадающий список навигации работает, но при нажатии фон отсутствует.
- Как мне переместить раздел «мы разрабатываем приложения для IOS» вверх? Я попробовал класс «pull», но он фактически потянул его горизонтально, а не вверх.
- Как мне настроить высоту разных строк для мобильного просмотра? Как вы можете видеть, высоту служб (белый фон) необходимо увеличить намного дольше, но для мобильных устройств она довольно короткая.
Я довольно новичок в этом, поэтому, если бы вы, ребята, могли мне помочь, это было бы очень ценно. Заранее благодарю вас!
Ответ №1:
Вам просто нужно указать фон выпадающего списка навигации background-color
, например:
.navHeaderCollapse {
background-color: #222;
}
Если вы хотите минимизировать отступы, чтобы можно было переместить раздел «мы разрабатываем приложения для IOS» вверх, вы можете использовать медиа-запрос с желаемой шириной изменения браузера, который изменяет отступы. Используйте его так:
@media (max-width: 765px) {
.xlg-buffer {
padding-top: 35px;
}
}
То же самое работает для настройки высот разных строк в «мобильном представлении». Просто используйте according media-query
для изменения высот. Например, так:
@media (max-width: 765px) {
.row-services {
height: auto;
}
}
ПРИМЕЧАНИЕ:
Все приведенные значения являются лишь примерами, вам нужно адаптировать их к вашим потребностям. Используйте browser inspector
, чтобы узнать, на какие селекторы вам нужно настроить таргетинг и какие свойства вам нужно изменить.