javascript - Bootstrap 3.0 : Grid System Implementation

Question

我在我的元素中使用 Bootstrap 3.0(第一次)。现在我想要的是连续 6 个框，宽度为 1024 像素，但是当在选项卡中查看页面时，每行应该有 3 个框。使用以下代码，我有六个用于大屏幕的框，但对于 ipad/tabs，它不会达到每行 3 个框。请查看代码并建议我修复它的方法。

<div class="container">             
 <div class="row" id="features">
  <div class="col-sm-2  col-sm-4  ">
  <div class="panel">
     <span>Panel content </span>                         
  </div><!-- end panel -->
  </div><!-- end col-sm-2-->

  <div class="col-sm-2  col-sm-4  ">
  <div class="panel">
     <span>Panel content </span>                         
  </div><!-- end panel -->
  </div><!-- end col-sm-2-->

  and six boxes like this 
</div >
</div >
</div>

Answer 1

Bootstrap 已经带来响应式设计，但仅限于 768px(Ipad 宽度)。您可以将此 Bootstrap 功能与他们的列系统一起使用:

.col-xs-* 到 <768px .col-sm-* 到 ≥768px .col-md-* 到 ≥992px 和 .col-lg-* 到 ≥1200px

网上有更多信息:http://getbootstrap.com/css/

如果你想要 768 以下的响应式设计，你需要自己使用:

例如@media(最小宽度:600px，最大宽度:768px)。