将 div 对齐到 Bootstrap 行的底部

Question

如何将 div 与 class 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-responsive-columns-of-same-height

Answer 2

正如 Kmandov 提到的那样，使用 table 结构显示来获取您要查找的内容，并使用媒体查询更改小屏幕的显示样式。示例 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%;
    }
}

看看这是否对你有帮助。

将 div 对齐到 Bootstrap 行的底部

Align div to bottom in Bootstrap Row

html

css

twitter-bootstrap