Новичок в Bootstrap — возникли некоторые проблемы с мобильным стилем

#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 , чтобы узнать, на какие селекторы вам нужно настроить таргетинг и какие свойства вам нужно изменить.