col-xs-* не работает, когда мобильный телефон ориентируется между горизонтальным и вертикальным видом в начальной загрузке 3

У меня проблема в Bootstrap 3 при использовании col-xs-* для мобильных устройств.

Я использую приведенный ниже код для мобильных устройств.

 <div class="row">
    <div class="col-xs-6"> div content 1 </div>
    <div class="col-xs-6"> div content 2 </div>
    <div class="col-xs-6"> div content 3 </div>
    <div class="col-xs-6"> div content 4 </div>
    <div class="col-xs-6"> div content 5 </div>
    <div class="col-xs-6"> div content 6 </div>
 </div>

здесь div в равной степени (50%) используется как в горизонтальном, так и в вертикальном представлении для мобильных устройств.

Но я хочу получить 3 блока div в мобильном горизонтальном представлении и 2 блока в вертикальном представлении.

для этого я также попробовал код ниже. Но нет пользы...

  <div class="row">
    <div class="col-xs-6 col-sm-4"> div content 1 </div>
    <div class="col-xs-6 col-sm-4"> div content 2 </div>
    <div class="col-xs-6 col-sm-4"> div content 3 </div>
    <div class="col-xs-6 col-sm-4"> div content 4 </div>
    <div class="col-xs-6 col-sm-4"> div content 5 </div>
    <div class="col-xs-6 col-sm-4"> div content 6 </div>
 </div>

пожалуйста, проверьте ниже jpg для ссылки:

введите здесь описание изображениявведите здесь описание изображения

Пожалуйста, помогите мне в этом..


mobile responsive-design twitter-bootstrap-3 landscape-portrait
person user3603664    schedule 05.05.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно настроить точку останова для классов col-sm-x. В файле CSS начальной загрузки вы найдете строку вроде:

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, ....

Измените 768px туда, где вы хотите, чтобы точка останова переопределяла эти классы классами col-xs-x.

person Ted    schedule 14.04.2015