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-responsive-columns-of-same-height

Answer 2

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

看看这对你有帮助。

在Bootstrap Row中将div对齐到底部

2 个答案: