引导3-行中的列应该具有相同的高度。
引导3-行中的列应该具有相同的高度。
提问于 2016-05-05 06:58:56
我在一个彩色盒子里有4篇文章的视图。当屏幕足够宽时，它们需要并排显示，并具有如下相同的高度：
Article 1 Article 2
Article 3 Article 4我尝试添加样式，以便容器行和列具有以下样式，但也没有结果：
.container-height{
display:table;
}
.row-height{
display:table-row;
}
.col-height{
display:table-cell;
float:none;
} 回答 3
Stack Overflow用户
回答已采纳
发布于 2016-05-05 07:17:50
好吧，如果您对jquery解决方案没有意见，那么请看一下这段代码。
检查小提琴
$(document).ready(function(e) {
var heightNew = 0;
$('.col-md-6 article').each(function(index, element) {
if($(this).height() > heightNew){
heightNew = $(this).height();
}
$(this).css('height', heightNew+'px');
});
});因此，只需将其添加到标记中并使用此css即可。
article{
text-align:center;
background-color:lightgray;
margin:0 25px 50px 25px;
}
h1, p{
padding:10px;
}我所做的是，我取了文章的最高高度，并把这个高度给了其他人，所以谁是最大的文章，所有的文章都将是相同的高度。希望你会喜欢我的主意。谢谢
Stack Overflow用户
发布于 2016-05-05 07:13:38
在2 cols的情况下，通过使用引导类col lg-6，可以使它们彼此接近，这加起来只有12，并且只能在一个大屏幕上活动(从1200 12到更高)。
获得所有列相同高度的最快方法(在固定内容的情况下)是通过使用媒体查询来设置高度。
@media(min-width: 1200){ height: xx; }
Stack Overflow用户
发布于 2016-05-05 07:49:32
如果您使用引导程序，请使用。此代码对您非常有用
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row row-eq-height">
<div class="col-md-6">
<h1>Header 1 </h1>
<p>Lorem ipsum dolor sdfdfdit amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec.. Lorem ipsum dolor sdfdfdit amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
</div>
<div class="col-md-6">
<h1>Header 1 </h1>
<p>Lorem ipsum dolor sit fdfdfamet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
</div>
<div class="col-md-6">
<h1>Header 1 </h1>
<p>Lorem ipsum dolor sidfdft amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
</div>
<div class="col-md-6">
<h1>Header 1 </h1>
<p>Lorem ipsum dolor sit afgfmet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
</div>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37044396
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号