Twitter bootstrap 如何创建折叠的3列布局宽度引导2.3

我的目标是一个具有固定列宽的响应式布局（适用于平板电脑和台式电脑），以实现台式电脑3列、平板电脑2列和手机1列。 不幸的是，“768”-容器的宽度是通过使用网格和粘合宽度来计算的

---

有没有办法在不更改响应文件*.less文件的情况下说“嘿，768容器应该只有700px”呢？

实现这一点的方法之一是使用@media查询

例如，若您使用

.span4

来跨越3列，您可以使用CSS覆盖平板电脑上

.span4

的引导宽度：

@media (min-width: 768px) and (max-width: 979px) {
    .row .span4 {width:46%;}
}

演示@media查询：

另一种方法是使用响应实用程序类。此方法涉及更多HTML标记，但布局更简单。例如，这里3

span4

为桌面显示，2

span6

为平板电脑显示。对于手机，

span6

切换到100%以显示1列

<div class="container">
  <div class="row visible-desktop hidden-tablet hidden-phone">
      <div class="span4">..</div>
      <div class="span4">..</div>
      <div class="span4">..</div>
  </div>
  <div class="row hidden-desktop visible-tablet">
      <div class="span6">..</div>
      <div class="span6">..</div>
  </div>
</div>

..
..
..
..
..

实用程序类演示：