將div對齊到Bootstrap行的底部

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

這可以通過將顯示類型更改為table和table-row來完成

這是一個類似的解決方案： http : //www.minimit.com/articles/solutions-tutorials/bootstrap-3-response-columns-of-same-height

Answer 2

正如Kmandov所述，使用表結構顯示可獲取所需內容，並使用媒體查詢來更改小屏幕的顯示樣式。 小提琴的例子

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%;
    }
}

看看這是否對您有幫助。