javascript - 如何使用Twitter Bootstrap有选择地堆叠列

我这里有一个基于流体示例的模板：
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文件实现此目标？

最佳答案

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

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

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

}
}

由于这会将视点767px及以下的每个col的宽度重置为50％，因此这将适用于具有两列的行。对于其他组合，只需使用宽度设置即可。您可能还想优化填充和其他样式，但是现在足够简单了。

希望这可以帮助！