Вопрос по css3, css, twitter-bootstrap – Как настроить отзывчивые столбцы и поля ввода в загрузчике Twitter?

4

Главный вопрос, как настроить загрузочный отзывчивый CSS? Мой код частично работает, но я не могу это исправить. Это трудно объяснить, поэтому для лучшего понимания я сделал визуализацию, представленную на скриншотах.

Я разместил актуальный очищенный код шаблона наJSFIDDLE.

Теперь, когда ширина больше 1200 пикселей, все в порядке, это означает, что они два span6 рядом: enter image description here Дисплей с разрешением от 1200 до 980 пикселей должен выглядеть следующим образом: enter image description here Менее 979px и более 768px на первом свапе navbar. Мне бы хотелось иметь что-то подобное в центре контейнера: enter image description here До следующей усадки ниже 768px правая колонка переходит на новую строку и остается там при дальнейшем снижении до 480px и ниже. Я думаю, что представленное ниже представление подходит для мобильных устройств и лучше выглядит в браузерах с узким рабочим столом, за исключением того, что при масштабировании оба столбца не находятся в центре: enter image description here

Наименьшая ширина соответствует моим ожиданиям.

Ваш Ответ

1   ответ
9

Я не уверен, правильно ли я понимаю ваш вопрос, но вы можете настроить поведение, используя медиа-запросы

// Landscape phones and down
@media (max-width: 480px) { ... }

// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }

// Large desktop
@media (min-width: 1200px) { ... }

Возможно, вам придется переписать некоторые классы и идентификаторы. Ответную информацию можно найти на git:

responsive.less

Тем не менее, играйте с этими настройками, только если вам действительно нужно.

Error: User Rate Limit Exceeded roza
Error: User Rate Limit Exceeded roza
Error: User Rate Limit Exceededgithub.com/twitter/bootstrap/blob/master/less/…Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded roza
Error: User Rate Limit ExceededJSFIDDLEError: User Rate Limit Exceeded roza

Похожие вопросы