google "bootstrap row col height same"1) 加上 class row-eq-height如下<div class="row row-eq-height">同时在css中增加 .row-eq-height{
display: flex;
}
但是 ie不起作用 至少 ie9不起作用 来自 http://acmetech.github.io/todc-bootstrap-3/examples/equal-height-columns/
2) 有大用 html 代码<div class="container"><!-- top row of wells or rounded corner divs --><div class="row col-wrap"> <div class="col-sm-4 col"> <div class="well"> <p>left column </p> <p>left column </p> <p>left column </p> </div></div><!-- end span 4--> <div class="col-sm-4 col"> <div class="well"> <p>middle column</p> </div></div><!--end span4--> <div class="col-sm-4 col"> <div class="well"> <p>right column </p> <p>right column </p> <p>right column </p> <p>right column </p> <p>right column </p> </div></div><!-- end span 4--> </div><!-- end row --> <div class="row base col-wrap"><!-- add a second row of wells or rounded corner divs immeadiately underneath--> <div class="col-sm-4 col-base"><div class="well"></div></div> <div class="col-sm-4 col-base"><div class="well"></div></div> <div class="col-sm-4 col-base"><div class="well"></div></div></div><!-- close row --> </div>css代码@media (min-width: 768px) {/* top row */.col .well{ margin-bottom: -99999px; padding-bottom: 99999px; }/* bottom row */.col-base{ margin-top: -15px; /* cut off top portion of bottom wells */}}@media (max-width: 767px) {.row.base{ display:none;}}.col-wrap{ overflow: hidden;}上面的html和 css 可 实现 col等高来自 http://jsfiddle.net/panchroma/D4xdE/
3) 有大用html代码<div class="row">
<div class="col-md-3 index_div_item">
<a href="#">
<div class="well" id="item1">
<h1 class="h1_item"><span class="titre_item">Title</span></h1>
<h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
<p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
</div>
</a>
</div>
<div class="col-md-3 index_div_item">
<a href="#">
<div class="well" id="item2">
<h1 class="h1_item"><span class="titre_item">Title</span></h1>
<h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
<p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
</div>
</a>
</div>
<div class="col-md-3 index_div_item">
<a href="#">
<div class="well" id="item3">
<h1 class="h1_item"><span class="titre_item">Title</span></h1>
<h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
<p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
</div>
</a>
</div>
<div class="col-md-3 index_div_item">
<a href="#">
<div class="well" id="item4">
<h1 class="h1_item"><span class="titre_item">Title</span></h1>
<h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
<p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
</div>
</a>
</div>
</div>
js 代码
$( document ).ready(function() {
var heights = $(".well").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".well").height(maxHeight);
});
来自 http://stackoverflow.com/questions/23287206/same-height-column-bootstrap-3-row-responsive
4) 有大用
html 代码
<div class="row">
<div class="col-xs-12 col-sm-4 panel" style="background-color: red">
some content
</div>
<div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
kittenz
<img src="http://placekitten.com/100/100">
</div>
<div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
some more content
</div>
</div>
一种 css代码 .row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
另一种 css 代码
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
来自 http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height
还有一种 http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
转载请注明原文地址: https://ju.6miu.com/read-38206.html
