javascript - 如何使用 twitter bootstrap 有选择地堆叠列

Question

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

Answer 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%，因此这将适用于具有两列的行。对于其他组合，只需使用宽度设置即可。您可能还想优化填充和其他样式，但现在很容易。

希望这对您有所帮助!