如何将 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>
最佳答案
正如 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%;
}
}
看看这是否对您有帮助。
关于html - 在 Bootstrap 行中将 div 对齐到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27940033/