부트 스트랩 행의 아래쪽에 div를 정렬하십시오.

Question

div을 heightSmall에서 row까지 정렬하려면 어떻게해야합니까? vertical-align: bottom으로 시도하지만 도움이되지 않습니다. 이 테이블 및 여기서 테이블 행

으로 표시 형식을 변화시킴으로써 행해질 수있다

.heightBig{height:100px;background-color:red;} 
 
.heightSmall{height:50px;background-color:green;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-6 col-sm-6 col-xs-6"> 
 
     <div class="heightBig"></div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6 col-xs-6"> 
 
     <div class="heightSmall"></div> 
 
    </div> 
 
</div>

Answer 1

구조보기를 사용하여 찾고있는 것을 얻고 미디어 쿼리를 사용하여 작은 화면의 표시 스타일을 변경합니다. 예 Fiddle

CSS이 당신을 할 수 있는지 확인이

@media (min-width: 768px){ /*for bigger screens*/ 
    .row{ 
     display:table-row; 
    }  
    .col-sm-6{ 
     display:table-cell; 
     float: none; 
    } 
} 

@media (max-width: 768px){/*for smaller screens*/ 
    .col-sm-6{ 
     float:left; 
     width:100%; 
    } 
} 

과 같을 것이다.

Answer 2

유사한 해결책 : Kmandov 테이블 사용 된 바와 같이 http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height