부트 스트랩에서 열 클래스의 너비와 동일한 높이를 조정하는 방법은 무엇입니까?

Question

부트 스트랩의 열 클래스에 적용된 폭으로 div에 동일한 height을 적용하고 싶습니다.

이 코드가 있다고 가정합니다. 이 스 니펫을 실행하고 전체 페이지 모드로 봅니다.

.item{ 
 
    border: 1px solid red; 
 
    background-color: lightblue; 
 
    height: 50px; 
 
    }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
 
    </div> 
 
    <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
 
    </div> 
 
    <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
 
    </div> 
 
    <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
 
    </div> 
 
    <div class="item col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
 
    </div> 
 
</div>

그래서 나는 폭과 동일한 높이를 적용 할. 예를 들어 col-lg-4이 적용되고 item div의 너비는 200px입니다. item에 동일한 200px 높이를 적용하려면 어떻게해야하나요?

Answer 1

.item:after{ 
    display:block; 
    content:" "; 
    padding-top:100%; 
} 

항목 : pseudoelement가 부모 (.item)의 폭과 같은 높이를 취할 것입니다 후
그래서 '.item'폭으로

Answer 2

equalizer.js을 같은 높이를 취할 것을 할 수있다 특정 열의 높이는 동일합니다.