如何使用 twitter bootstrap 有选择地堆叠列答案

【问题标题】：How do I selectively stack columns with twitter bootstrap如何使用 twitter bootstrap 有选择地堆叠列
【发布时间】：2013-04-22 16:33:59
【问题描述】：

我在这里有一个基于流体示例的模板： http://twitter.github.io/bootstrap/examples/fluid.html

我有来自这里的最新文件，唯一的自定义是颜色： http://twitter.github.io/bootstrap/customize.html

基本标记是

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <div class="well sidebar-nav">
    Column 1
      </div><!--/.well -->
    </div><!--/span-->
    <div class="span9">
    Column 2
    </div><!--/span-->
  </div><!--/row-->
</div>

第 2 列在移动设备上属于第 1 列，这有时是我想要的。但在某些情况下（特定页面），我希望 2 列并排保持。我的问题是如何使用相同的 js/css 文件实现这一点？

【问题讨论】：

标签： javascript css twitter-bootstrap

【解决方案1】：

这是一种可能性：http://jsfiddle.net/panchroma/RMPMA/

您会看到列不会落在 class= double-col 的行上
CSS

@media (max-width: 767px){
.double-col.row-fluid [class*="span"] {
float: left;
width: 50%;

}
}

由于这会在 767 像素及以下的视点上将每个列的宽度重置为 50%，因此这将适用于具有两列的行。对于其他组合，只需使用宽度设置即可。您可能还想改进填充和其他样式，但现在很容易。

希望这会有所帮助！

【讨论】：