Как иметь несколько столбцов в Bootstrap строке

Question

Я использую Bootstrap 3. У меня есть одна строка, которая будет содержать переменное количество столбцов, начиная с 1-допустим 9.

АРЕ в настоящее время устанавливается на Col-Л.Г. -4, поэтому три должны отображаться в одной строке. Обычно я создавал новую строку, но поскольку я динамически добавляю столбцы, я не могу этого сделать или, по крайней мере, не знаю, как это сделать.

Когда мой клиент добавляет сообщение, он автоматически создает столбец с контентом.

Проблема заключается только в Firefox & IE, как на рабочем столе, так и на мобильных устройствах. Четвертый элемент (или первый элемент, который должен перейти к следующей строке) будет перенесен на новую строку и будет смещен. См. Снимок экрана ниже.

Я использую ExpressionEngine как свою CMS.

Он отлично отображен в Chrome.

Код Ниже

<div class="container"> 
     <div class="row">     
      {exp:channel:entries channel="plans" orderby="title" sort="asc"} 
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 centered">    
       <div class="grid mask"> 
        <figure> 
         <img class="img-responsive" src="{plan_main_image}"> 
         <figcaption> 
          <h5>{title}</h5> 
          <a data-toggle="modal" href="#{url_title}" class="btn btn-primary btn-lg">View Floor Plan</a> 
         </figcaption> 
        </figure> 
       </div> 
      </div> 
      <div class="modal fade" id="{url_title}" tabindex="-1" role="dialog" aria-labelledby="{url_title}" aria-hidden="true"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
         <h4 class="modal-title">{title}</h4> 
        </div> 
        <div class="modal-body text-left"> 
         <div class="row"> 
          <div class='list-group gallery'> 
           <div class="col-lg-4"> 
            <a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_main_image}"> 
             <img class="img-responsive" alt="" src="{plan_main_image}" /> 
            </a> 
           </div> 
           <div class="col-lg-4"> 
            <a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_first_level}"> 
             <img class="img-responsive" alt="" src="{plan_first_level}" /> 
            </a> 
           </div> 
           <div class="col-lg-4"> 
            <a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_second_level}"> 
             <img class="img-responsive" alt="" src="{plan_second_level}" /> 
            </a> 
           </div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-lg-12"> 
           {plan_description} 
          </div> 
         </div> 
         <!--<div class="row"> 
          <div class="col-lg-12"> 
           <b><a href="{plan_floor_plan_pdf}" download="{plan_floor_plan_pdf}">Download the floor plan</a></b> 
          </div> 
         </div>-->              
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
        </div><!-- /.modal-content --> 
       </div><!-- /.modal-dialog --> 
       </div><!-- /.modal --> 
      {/exp:channel:entries}              
     </div><!-- /row --> 
     <br> 
     <br>    
    </div><!-- /row --> 
</div><!-- /container --> 

Благодарности

Answer 1

Причина этого заключается в том, потому что первое изображение немного выше, чем другие изображения. Для этого вам нужно использовать сброс столбца. См. Responsive Column Resets в документе.

Основная концепция состоит в том, чтобы добавить div после каждой горизонтальной группировки, которая содержит clearfix, чтобы следующая горизонтальная группировка была очищена до и правильно выровнена.

Для более сложных сценариев вы можете увидеть мой ответ здесь: Gap in Bootstrap stacked rows.