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

2 篇文章 0 订阅
网友奉送的代码 但是不理想 好像不能适用个别情况
//dom元素加载完时间
$(document).ready(function(){
 asynconresize();    
         })
//页面改变大小事件
window.onresize = function(){
 asynconresize();
 }
 //改变元素大小
 var asyncοnresize=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>
一种 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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值