(부트 스트랩) 열을 인라인 블록으로 균일하게 표시합니다.

Question

나는 멋진 열 집합을 웹 사이트에 만들려고합니다. 텍스트가 정확히 같은 길이가 아니라면 (그리고 사진의 높이가 똑같은 경우) 사이트는 거대한 공백을 표시합니다. 아래 이미지는 테마를 테스트 할 수있는 더미 제품을 보여줍니다.

나는 정확하게 정렬 할 항목을 얻을 수 없었다. 여기

<div class="container-fluid lg-container"> 
<div class="row"> 
<div class="container-fluid"> 
{bundle = filter(pages, 'product') } 
      <div class="row row-body row-margin-bottom no-padding"> 
      { foreach item in bundle } 

       <div class="col-xs-12 col-sm-6 col-md-4" data-category="view"> 
       <div class="lib-panel"> 
         <div class="lib-header"> 
          <a href="#">{{ item.title }}</a> 
         </div> 
        <div class="row xsm-catpad "> 
         <a href="{ item.url }" > 
         <img src="http://xpenology.org/wp-content/themes/qaengine/img/default-thumbnail.jpg" class="lib-img-show img-responsive" /> 
         </a> 
          <div class="lib-desc"> 
           <p{ item.content }...</p> 
          </div> 
         <div class="col-xs-12"> 
          <a href="{{ item.url }}" title="{{ item.meta.title }}"><button class="btn christmas">Check it out</button></a> 
         </div> 
         </div> 
       </div> 
      </div> 
    {% endfor %} 
    </div> 
    </div> 
    </section> 
     </div><!-- /.row --> 
    </div> 

는 내가 필요했던 것을 포함 희망, 일부 CSS입니다,하지만 큰 파일 : 이것은 HTML의 루프가 제품을 당겨하는 것입니다 저는 꽤 자주이 문제가 발생

.row-body 
{ 
    padding: 0; 
    margin: 0px; 
} 
.lib-panel { 
    margin-bottom: 20Px; 
} 
.lib-panel img { 
    width: auto; 
    background-color: transparent; 
} 

#md-img{ 
    width: auto; 
} 
.lib-panel .row, 
.lib-panel .col-md-6 .col-sm-6 .col-sm-4 .col-md-4 .col-sm-3 .col-md-3{ 
    padding: 0; 
} 

.lib-panel .lib-wide-row { 
    padding: 0 0 0 0; 
} 

.lib-panel .lib-header { 
    text-align: center; 
    font-size: 20px; 
    padding: 10px 5px 0 5px; 
} 
@media (max-width: 768px) and (min-width: 300px) { 
    .lib-panel .lib-header { 
    font-size: 40px; 
    } 
    .row .row .xsm-catpad{ 
    width: 80%; 
    margin: auto; 
    } 
body {padding-bottom: 125px;} 
} 

.lib-panel .lib-row.lib-mini-header { 
    text-align: justify; 
    font-size: 16px; 
    padding: 5px 0px 0 0px; 
} 
.lib-panel .lib-row.lib-ad-header { 
    text-align: left; 
    font-size: 16px; 
    padding: 5px 0px 0 0px; 
} 

.lib-panel .lib-row.lib-desc { 
    position: relative; 
    height: 100%; 
    display: block; 
    font-size: 12px; 
} 
.lib-desc p{ 
    font-size: 14px; 
    text-align: justify; 
} 

.lib-panel .lib-wide-row.lib-wide-desc { 
    height: 100%; 
    font-size: 12px; 
} 
.lib-panel .lib-row.lib-desc a{ 
    position: absolute; 
    width: 100%; 
    bottom: 10px; 
    left: 20px; 
} 

.row .row .xsm-catpad{ 
width: 80%; 
margin: auto; 
} 

Answer 1

및 보통 플렉스로 행과 열을 표시하여 문제를 해결하십시오. 예 :

<div class="row flexrow"> 
    <div class="col-sm-6"> 
    content 
    </div> 
    <div class="col-sm-6"> 
    content 
    </div> 
</div> 

는 CSS :

.featurerow, .featurerow > col-sm-6{ 
display: flex; 
} 

Answer 2

어휴, 내가 할하는 데 필요한 모든이

.row { 
    display: flex; 
    flex-wrap: wrap; 
} 

를 추가했다 그리고 모든 즉시 수정되었습니다.

Answer 3

부트 스트랩에는 특수한 클래스가 있습니다. 각 열의 행 다음에 <div class="clearfix"></div>을 추가하십시오.