Bootstrap 块级元素内子级块级元素高度一致问题。

最新推荐文章于 2022-04-09 11:18:18 发布

不喜欢写代码的程序员大叔

最新推荐文章于 2022-04-09 11:18:18 发布

阅读量5.5k

点赞数

分类专栏： Html

Html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本问题具有通性，不必限制在bootstrap。

本文参考出处：http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height

粘出来的三种解决方案只是点赞人数最多的那个回复，但是其余的回复仍有很多参考价值，可以参考一下的。

引入bootstrap

<!DOCTYPE html>
<html>
    <head>
        <title><?php echo $title; ?></title>
    </head>
    
    <!-- 这个标签可以修改在大部分的移动设备上面的显示，为了确保适当的绘制和触屏缩放。-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <!-- Bootstrap --> 
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <!-- 我们使用的html5的一些新的标签，那么在IE9以下的浏览器并不支持这些标签，也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件如下  -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]--> 
    <!--引入jquery-->
    <script type="text/javascript" src="/bootstrap/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
    
    <style type="text/css">
         /** img { height: auto; width: auto\9; width:100%; } */
        img{max-width:100%;}
        
        .head_bg_color{
            background-color: #f8f8f8;
        }
        
        .body_bg_color{
            background-color: #f0f0f2;
        }
        
        html, body{ margin:0; height:100%; }
        
        
    </style>
    
    <body>

主体body：

<div class="row">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
   使三列的高度一致
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="/images/school/h.jpg">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
<span style="color:#FF0000;"><strong> <span> some more content<span><img style='width:0px;height:100%'/></strong></span>
  </div>
</div>


<div>aaaa</div>

样式表，解决方案：

方案一：

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

方案二： using table

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

方案三： Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

如果出现块级元素和行级元素对其的情况，可以添加width：0px的图片实现。

不喜欢写代码的程序员大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 块级元素内子级块级元素高度一致问题。

本问题具有通性，不必限制在bootstrap。本文参考出处：http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height粘出来的三种解决方案只是点赞人数最多的那个回复，但是其余的回复仍有很多参考价值，可以参考一下的。引入boot
复制链接

扫一扫

专栏目录