0

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

4

1 回答 1

0

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

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

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

}
}

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

希望这可以帮助！

于 2013-04-22T18:39:51.517 回答