css - 如何在较小的浏览器窗口上将 span9 变成 span12？

Question

我的布局如下：

<div class="container">
<div class="span9" ></div> <div class="span3" ></div>
</div>

当用户在平板电脑或移动设备上查看页面时，我希望 span9 div 和 span3 div 都成为 span12 div，并且我希望它们垂直堆叠在另一个之上。

这可以实现吗？如果可以，如何实现？我当前的解决方案依赖于我在小型浏览器窗口上显示的第二组 div，并隐藏了上面的 div。

Answer 1

使用 Bootstrap 3，这非常简单：

<div class="col-md-9">...</div>
<div class="col-md-3">...</div>

在典型的桌面分辨率（> 992px）下，div 将是 9/12 列和 3/12 列。在任何更小的东西上，它们将是 12/12。

Twitter Bootstrap 3 网格

---

使用 Bootstrap 2.3.2，您可以添加媒体查询：

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
  .span9, .span3 {
    display: block;
    float: none;
    width: 100%;
  }
}