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

  [...]

}

Answer 2

对于行：

<div class="row-fluid">

对于列：

<div class="span3">

例如：

<div class="container-fluid">
   <div class="row-fluid">
    <div class="span3"> Image/Content </div>
    <div class="span3"> Image/Content </div>
    <div class="span3"> Image/Content </div>
    <div class="span3"> Image/Content </div>
   <div>
</div>

这是针对bootstrap中的流畅/响应式布局，页面分为12个Spans，支持嵌套。

了解更多信息

http://getbootstrap.com/2.3.2/

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

将bootstrap 3 col转换为bootstrap 2

2 个答案: