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

本文介绍使用Bootstrap实现等高列的方法,包括使用flex布局、padding技巧及JavaScript动态调整等方式,并提供不同场景下的HTML、CSS和JS代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

网友奉送的代码 但是不理想 好像不能适用个别情况
//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

### 回答1: bootstrap col-md-4是Bootstrap框架中的一个类,用于定义网页布局中的列(column)。其中,md表示中等屏幕(medium screen)的大小,4表示该列占据了网页布局中的四分之一度。因此,使用col-md-4类可以将网页分为12个等分,每个等分的度为网页度的1/12,其中一个col-md-4类占据了3个等分的度。 ### 回答2: Bootstrap 是一种前端开发框架,使用它可以更加方便地进行网站的设计和开发。在 Bootstrap 中,col-md-4 是一个很常用的类名。 我们知道,在网页中,页面被分成若干个列,每个列又被分成若干个行。为了方便设计和布局,Bootstrap 提供了若干个列度的类名,其中 col-md-4 表示一个占据四分之一度的列。 具体来说,-md- 表示在中等屏幕尺寸上生效,也就是桌面设备上,而 -4 则表示占据四分之一的度。如果要让一个元素占据整个行的度,可以使用 col-md-12。 同时,Bootstrap 还提供了其他的列度类名,如 col-md-6、col-md-8 等,分别表示占据一半和三分之一的度。在设计页面布局时,我们可以根据需要选择不同的列度类名,以达到比较好的效果。 总之,Bootstrap col-md-4 是一个很常用的类名,可以让我们更加方便地进行页面的设计和开发。希望这篇回答能对您有所帮助。 ### 回答3: Bootstrap 是一种 Web 设计框架,其中有一个重要的组件是 col-md-4。 Col-md-4 是用于 Bootstrap 栅格系统中的一个类,它代表着一个列的度占据了整个页面度的三分之一。使用 col-md-4 类可以让开发者更加轻松地在网页的布局中控制单独一个列的大小。 Bootstrap 栅格系统的设计思想,是围绕着将页面布局划分为若干列,并适配不同屏幕大小的设备。通过定义列数及占据的度比例,页面可以有效地实现响应式布局,使得页面在不同设备上的显示效果更加协调一致Col-md-4 是其中一个具有代表性的组件。“md” 表示 medium 屏幕,以此代表中等尺寸设备。数字 4 则代表着该列占据 12 个格子中的 4 个格子,即占用整个页面度的三分之一。根据开发者的具体需求,也可以使用其他数字来表达不同的比例关系,例如 col-md-6 表示页面的一列占用整个页面度的一半。 总之,Bootstrap col-md-4 组件在实现网页布局的过程中非常有用,它可以帮助开发者更好地控制页面的,并且根据不同的设备尺寸设计出更加美观的响应式网页。同时,Bootstrap 还有许多其他的工具和组件可以让开发者轻松地实现出色的网页设计。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值