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%;

}
}

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

希望这有帮助！

如何使用twitter bootstrap选择性地堆叠列

1 个答案: