bootstrap thumbnails второй ряд не правильно сидит

Question

Кажется, я все время сталкиваюсь с этой проблемой, и мне бы хотелось получить совет от бутстрап-гуру.

jsfiddle демонстрирует проблему, потому что на родительском контейнере имеется строка-жидкость, только первая строка эскизов правильно помещается, остальные находятся в виде вставки (т. Е. Третий эскиз не находится непосредственно под первым миниатюром).

код выглядит следующим образом:

<div class="container row-fluid"> 
    <div class="span6"> 
     <p>som content here</p> 
    </div> 
    <div class="span6"> 
     <ul class="thumbnails"> 
      <li class="span6"> 
       <div class="thumbnail"> 
        <img src="http://placehold.it/150x100" /> 
       </div> 
      </li>  
      <li class="span6"> 
       <div class="thumbnail"> 
        <img src="http://placehold.it/150x100" /> 
       </div> 
      </li>  
      <li class="span6"> 
       <div class="thumbnail"> 
        <img src="http://placehold.it/150x100" /> 
       </div> 
      </li>  
     </ul> 
    </div> 
</div> 

Answer 1

оказывается, это известная проблема/ошибка в Bootstrap, текущая работа вокруг, чтобы добавить что-то вроде этого в ваш CSS - что я могу подтвердить работы скважина:

li.thumbfix.span12 + li { margin-left : 0px; } 
li.thumbfix.span6:nth-child(2n + 3) { margin-left : 0px; } 
li.thumbfix.span4:nth-child(3n + 4) { margin-left : 0px; } 
li.thumbfix.span3:nth-child(4n + 5) { margin-left : 0px; } 
li.thumbfix.span2:nth-child(6n + 7) { margin-left : 0px; } 
li.thumbfix.span1:nth-child(12n + 13) { margin-left : 0px; } 

Исходное исправление не содержит thumbfix, но я добавил этот класс, чтобы я мог специально настроить разбитые списки эскизов и оставить все, что не пострадает от проблемы в одиночку.

Answer 2

Вы имеющий 3 span6 элементы внутри 1 span6 элемента, там нет места, поэтому третий эскиз упаковки, поэтому вы видите это, вы не сделали набор строк логически организовать их, попробуйте следующее:

<div class="container row-fluid"> 
    <div class="row"> 
     <div class="span6"> 
      <p>some content here</p> 
     </div> 
     <div class="span6"> 
      <ul class="thumbnails"> 
       <li> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/150x100" /> 
        </div> 
       </li> 
       <li> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/150x100" /> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="span6 offset6"> 
      <ul class="thumbnails"> 
       <li> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/150x100" /> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>