преобразование бутстрапа 3 col в bootstrap 2

Question

Я рассматриваю пример, где он может выполнять динамическую настройку столбца, так что, когда ширина окна мала, так что она не может соответствовать 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> 

Это для жидкостной/отзывчивой компоновки в бутстрапе, страница разделена на 12 интервалов, поддержка вложенности.

Для получения дополнительной информации

http://getbootstrap.com/2.3.2/

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