#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Я пытаюсь изменить порядок своих столбцов начальной загрузки.
HTML
<div class="row equal">
<div class="panel col-lg-7 col-md-7 col-sm-6 col-xs-push-12 " id="PanelFirst">
Some content here...
</div>
<div class="panel col-lg-5 col-md-5 col-sm-6 col-xs-pull-12 " id="PanelSecond">
Some Content here....
</div>
Я пробовал для col-xs-pull col-xs-push классов и. Я также пробовал выдвигать влево и pull-right класс.
Я пытался использовать медиа-запрос также для меньшего экрана.
@media only screen and (max-width:480px)
{
#PanelFirst {
float: right;
}
#PanelSecond {
float: left;
}
}
Когда я использую col-xs-pull-12 col-xs-push-12 классы и.. Это также влияет на большие экраны. я хочу — я хочу сдвинуть все PanelSecond вверх и PanelFirst вниз только для xs размера экрана.
Это нормально для большой осыпи, но на маленьком экране эта область входа должна быть сверху. Но это отображается так.
Комментарии:
1. Не могли бы вы, пожалуйста, немного прояснить, как вы хотите, чтобы ваш макет?
2. да, я собираюсь добавить скриншот. надеюсь, это сделает вас более понятными 🙂
3. Используйте col-md-5, поскольку класс хорошо работает для всех экранов и хорошо работает на всех экранах
Ответ №1:
ДЕМОНСТРАЦИЯ:
http://plnkr.co/edit/4mtMNsjaV2HMTj2vSs6Q?p=preview
В таких случаях всегда думайте о мобильных устройствах в первую очередь. Это упростит ответ.
<div class="row equal">
<div class="panel col-xs-12 col-sm-6 col-sm-push-6 col-md-5 col-md-push-7" id="PanelSecond">
panel second content here....
</div>
<div class="panel col-xs-12 col-sm-6 col-sm-pull-6 col-md-7 col-md-pull-5" id="PanelFirst">
panel first content here...
</div>
</div>
Поскольку вы хотите PanelSecond сверху, я изменил html, чтобы он оставался сверху, а затем PanelFirst . (Я держу в уме css mobile first.)
Затем используйте pull и push для настройки столбцов.
Выравнивание для lg, md и sm
Для xs
Комментарии:
1. Я не хочу меняться для большего экрана. Если я использую этот код, он также изменит мои панели для экрана среднего размера..
2. Вы хотите, чтобы panelsecond занимал 5 столбцов справа, а panelfirst — 7 столбцов слева, пока размер экрана xs не станет правильным? А для xs потребуется 12 столбцов. Пожалуйста, поправьте меня, если я ошибаюсь. Я также создам демонстрационную версию, чтобы поделиться с вами.
3. 5 столбцов справа и 7 столбцов слева для размера md и lg.. не для «xs». для xs я хочу 12 столбцов и сдвинуть его на секунду панели. для sm потребуется col6, который работает нормально. проблема заключается только в том, чтобы сдвинуться вверх на размер xs для col12
4. Пожалуйста, проверьте демонстрационную ссылку и обновленный ответ. Я думаю, это то, что вы хотите. Второй div будет иметь 5 столбцов и будет включен справа в lg и md. Первый div будет иметь 7 столбцов и будет слева в lg и md. Для sm 2-й div будет справа с 6 столбцами, а 1-й div будет слева с 6 столбцами. и в xs 2-й div будет сверху с 12 столбцами, а 1-й div будет снизу с 12 столбцами
5. В вашей демонстрации вы сдвигаете панели для большого экрана, в то время как для размера xs panelfirst не сдвигается вверх .. и это единственное, что я хочу,, 🙁
Ответ №2:
Просто измените порядок и примените push amp; pull для столбцов среднего размера:
вот так:
<div class="row equal">
<div class="panel col-sm-6 col-sm-push-6 col-md-push-7 col-md-5" id="PanelSecond">
Some Content here second....
</div>
<div class="panel col-sm-6 col-sm-pull-6 col-md-pull-5 col-md-7" id="PanelFirst">
Some content here First...
</div>
</div>
Комментарии:
1. спасибо, но это работает не так, как ожидалось.. Он выходит из класса контейнера .. и я хочу изменить порядок только для меньшего размера экрана
2. пожалуйста, проверьте демонстрацию .. она не выходит из контейнера… jsfiddle.net/uozve0me/1
3. PanelFirst не сдвигается для размера xs в вашей демонстрации… вы также меняете размер md и lg: (
4. Но вы хотите сдвинуть всю PanelSecond на up и PanelFirst на below только для экрана размера xs. — и это такая работа: jsfiddle.net/uozve0me/2
5. Спасибо… Смещение панелей в коде упростило задачу .. 🙂