добавить сетку, когда пейзаж bootstrap3

Question

Я хочу знать, есть ли способ добавить сетку при использовании lanscape для мобильного телефона. им с помощью начальной загрузки v3

Heres мой код

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
    <div class="card m-15"> 
    <div class="card-top"> 
     <img src="img/1.jpg"> 
    </div> 
    <div class="card-caption"> 
     <h6 class="text-center uppercase bold">chocolate chip cookies</h6> 
     <p>by <a href="#">lipsum</a> 
     </p> 
     <div class="tag"> 
     <a href="#">lipsum</a>,<a href="#"> lipsum</a> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
    <div class="card m-15"> 
    <div class="card-top"> 
     <img src="img/1.jpg"> 
    </div> 
    <div class="card-caption"> 
     <h6 class="text-center uppercase bold">chocolate chip cookies</h6> 
     <p>by <a href="#">lipsum</a> 
     </p> 
     <div class="tag"> 
     <a href="#">lipsum</a>,<a href="#"> lipsum</a> 
     </div> 
    </div> 
    </div> 
</div> 

результата в СМИ хз в режиме potraint его штраф. но когда в ландшафтном режиме он переходит в большое пространство.

Могу ли я изменить с col-xs-12 на col-xs-6, когда я использую только в ландшафтном режиме?

Answer 1

Если я понимаю, что вы хотите сделать правильно, я думаю, что самый простой способ добиться этого будет через использование медиа-запросов. Используя медиа-запрос в CSS, вы можете обнаружить, когда ширина окна изменилась и соответствующим образом отрегулировать свойства. Без использования javascript нет способа добавить или удалить класс, поэтому мы не сможем изменить col-xs-12 на col-xs-6

Первое изменение, которое я сделал бы, это добавить класс строк в ваши divs:

< DIV класс = "строка Col-LG-3 цв-мкр-3 цв-см-6 Col-хз-12"> содержание </DIV>

Тогда мы будем использовать средства массовой информации чтобы увидеть, когда была изменена ширина экрана (это будет во внешнем файле CSS).

@media (min-width: 400px) { 
    .row { 
    width: 60%; 
    margin-left: 20%; 
    } 
} 

Это говорит о том, что, когда наше окно, по крайней мере 400px широкий Дадим Row Див ширину 60% и дать ему Левое поле 20%, так что по центру.

Here is an example I made