html - 在 Bootstrap 行中将 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

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

看看这是否对您有帮助。