Bootstrap или W3.css - добавление столбцов в новую строку [дубликат]

У меня была аналогичная проблема. Я исправил этот скрипт довольно быстро и безболезненно:

<script>
  $.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
    $('#projects_container').isotope({
      itemSelector : '.project_item',
      layoutMode : 'fitRows'
    });
  });
</script>

для вашего случая, замените '#projects_container' для '# image-grid' и добавьте класс для каждого элемента div.

Пожалуйста, опишите или добавьте изображения, чтобы показать, как должна выглядеть ваша сетка (рабочий стол, планшет и мобильный телефон). Теперь мы должны угадать.

Строка с colms col-md-2 colomns может содержать 6 столбцов (6 x 2 = 12). Попробуйте код ниже, с вложенными столбцами (см. http://getbootstrap.com/css/#grid-nesting ).

<div class="container">     
<div class="row">
<div id="image-grid" class="col-sm-12 col-md-10">
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/1"> 
<img alt="Img 0259" src="/system/images/images/000/000/001/thumb/IMG_0259.JPG?1369368826">
2013-05-24
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/3"> 
<img alt="Img 0034" src="/system/images/images/000/000/003/thumb/IMG_0034.JPG?1369649370">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/2"> 
<img alt="Img 0008" src="/system/images/images/000/000/002/thumb/IMG_0008.jpg?1369649198">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/4"> 
<img alt="Rsz 1971061 10153145204760484 336557482 n" src="/system/images/images/000/000/004/thumb/rsz_1971061_10153145204760484_336557482_n.jpg?1377656209">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/5"> 
<img alt="Digital radiograph1" src="/system/images/images/000/000/005/thumb/digital_radiograph1.jpg?1377659810">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/6"> 
<img alt="Pamo" src="/system/images/images/000/000/006/thumb/pamo.jpg?1377659876">
2013-08-28
</a>            </div>
</div>
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/7"> 
<img alt="Tooth x ray 1" src="/system/images/images/000/000/007/thumb/tooth-x-ray_1.jpg?1377659952">
2013-08-28
</a>            </div>  
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/8"> 
<img alt="Fig9b" src="/system/images/images/000/000/008/thumb/fig9b.jpg?1377664192">
2013-08-28
</a></div>
</div>
</div>

<div class="col-sm-12 col-md-2"> 
<span class="glyphicon glyphicon-plus">
<a href="/images/new">Upload New Image</a>
</span>
</div>
</div>
</div>

Это решит вашу проблему

<div class="col-xs-6 col-md-3">
   <div class="well">
       content goes here...
   </div>
</div>

Я решил использовать display: inline-block и вручную настроить ответные столбцы вместо использования класса бутстрапа col-X-X. Я хотел 3 колонки для экранов XL и 2 для L, а 1 для остальных. Это CSS, который я использовал.

.section-card-col {
  margin-bottom: 22px;
  display: inline-block;
}

@media screen and (min-width: 1200px) {
  .section-card-col {
    width: calc(33% - 16px);
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: top;
  }
}

@media screen and (min-width: 900px) and (max-width: 1199px) {
  .section-card-col {
    width: calc(50% - 16px);
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: top;
  }
}

У меня возникла проблема с использованием изображений разного размера в миниатюре div с использованием рамки Bootstrap3. Это привело к разрыву рядов и сеток в зависимости от размеров изображений. Моя работа заключалась в том, чтобы использовать отличный маленький jquery-плагин под названием «equalize» и назвал его в классе «row».

Это сработало отлично, вы должны попробовать.