css - Twitter Bootstrap 仅移动列

Question

是否可以在 Boostrap 中制作“仅限移动设备”列？即在较小的屏幕上，一行 4 变成一行 2（3 * span4s 变成 2 * span6？）。我知道您可以通过添加隐藏移动元素.hidden-phone。

Zurb Foundation 有phone-twoetc 类可以做到这一点。http://www.zurb.com/article/859/fancy-mobile-layouts-with-the-foundation-

我需要编写自己的媒体查询来执行此操作吗？

Answer 1

Bootstrap 没有您所询问的类的内置等效项。

如果你想自己写，这里有一个让你开始的想法：http: //jsfiddle.net/panchroma/g6PRS/

CSS

@media (max-width: 767px) {
  .row-fluid.phone-two .span3 {
    width: 48%;
    margin-left: 4%;
    float:left;
  }

  .row-fluid.phone-two > .span3:nth-child(odd){
    margin-left: 0;
  }
}  

HTML

<div class="container">
  <div class="row-fluid phone-two">
    <div class="span3">
      span3
    </div>
    <div class="span3">
      span3
    </div>
    <div class="span3">
      phone-two span3
    </div>
    <div class="span3">
      span3
    </div>
  </div>
</div>  

希望这足以让你继续前进！

Answer 2

快速更新 bootstrap 3 现在支持您在此处执行的操作。

例如

<div class='row'>
   <div class='col-xs-3 col-md-6'>
   </div>

   <div class='col-xs-3 col-md-6'>
   </div>

   <div class='col-xs-3 col-md-6'>
   </div>

   <div class='col-xs-3 col-md-6'>
   </div>
</div>

Havent对此进行了测试，但应该可以。应该在移动设备上显示 2 列，在桌面上显示 4 列。更多信息http://getbootstrap.com/css/#grid