您的位置：首页 > Web前端 > BootStrap

bootstrap row 下面的 col-md 高度相等 高度 一致 高度一样 有大用

2016-06-08 16:19 411 查看
网友奉送的代码 但是不理想 好像不能适用个别情况

//dom元素加载完时间

$(document).ready(function(){

 asynconresize();    

         })

//页面改变大小事件

window.onresize = function(){

 asynconresize();

 }

 //改变元素大小

 var asynconresize=function(){

  var width=$(window).width();//获取浏览器宽度；

  var height=$(window).height();//获取浏览器高度；

  $("div").height(height-0);

  });

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>
[/code]
一种 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;
[/code]
}


来自 http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height[/code]
还有一种  href="http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height" target=_blank>http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css bootstrap col-md
相关文章推荐
新的分享
章节导航