css - 将 bootstrap 3 col 转换为 bootstrap 2

Question

我正在查看 this例如，它可以进行动态列调整，这样当窗口的宽度很小以至于无法容纳 4 列时，它会动态显示 2 列。我如何在 bootstrap 2 中执行此操作，因为没有列的概念，只有 span4、span2 等(请不要告诉我转换为 bootstrap3)？

这是 html:

   <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
          <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300"></a>
        </div>

Answer 1

你应该使用row-fluid:

<div class="row-fluid">
  <div class="span3">...</div>
  <div class="span3">...</div>
  [...]
  <div class="span3">...</div>
</div>

但是你不能使用 col-lg-3 col-md-4 col-xs-6 因为 Bootstrap 2.X 只支持一个 .span 类。

相反，您可以只使用不带数字的 .span 并使用 css 设置元素的大小:

HTML:

<div class="row-fluid custom-thumbnails">
  <div class="span thumb">...</div>
  <div class="span thumb">...</div>
  [...]
  <div class="span thumb">...</div>
</div>

CSS:

.custom-thumbnails .thumb {
  @media (max-width: 480px) {
    width: ...px;
  }

  @media (min-width: 768px) and (max-width: 979px) {
    width: ...px;
  }

  [...]

}