부트 스트랩 행에 여러 개의 열을 가지고 어떻게 내가 이르기까지, 컬럼의 변수 양을 개최 한 행이 부트 스트랩 3을 사용하고

Question

의 현재 설정되어 내지 컬럼-LG (9)

말 1-하자 -4이므로 3 개가 한 행에 표시되어야합니다. 일반적으로 새 행을 만들지 만 동적으로 열을 추가하기 때문에이 작업을 수행 할 수 없거나 적어도 방법을 알지 못합니다.

내 고객이 소식을 추가하면 내용이있는 열이 자동으로 만들어집니다.

이 문제는 바탕 화면과 모바일보기 모두에서 Firefox & IE에만 ​​있습니다. 네 번째 항목 (또는 다음 행으로 이동해야하는 첫 번째 항목)이 새 줄로 이동되어 오프셋됩니다. 아래 스크린 샷을 참조하십시오.

CMS로 ExpressionEngine을 사용하고 있습니다.

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을 참조하십시오.

기본적인 개념은 clearfix가 포함 된 각 가로 그룹 다음에 div를 추가하여 다음 수평 그룹이 이전에 올바르게 지워지고 올바르게 정렬되도록하는 것입니다.

더 복잡한 시나리오의 경우 여기 내 대답을 볼 수 있습니다 : Gap in Bootstrap stacked rows.