twitter-bootstrap - 如何创建折叠 3columns 布局宽度引导程序 2.3

Question

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

有没有办法说“嘿，768 容器应该只有 700 像素”而不更改 responsive*.less 文件？

Answer 1

在不进行 LESS 更改的情况下实现此目的的一种方法是使用 @media 查询。

例如，如果您要.span4跨 3 列，您可以使用 CSS 来覆盖 Bootstrap.span4在平板电脑上的宽度：

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

带有@media 查询的演示：http: //www.bootply.com/64864

另一种方法是使用响应式实用程序类。这种方法涉及更多的 HTML 标记，但布局更容易。例如，这里显示 3span4用于桌面，2span6显示用于平板电脑。对于电话，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>

带有实用程序类的演示：http: //www.bootply.com/64868