如何使 Bootstrap 列的高度都相同? [英] How can I make Bootstrap columns all the same height?

查看：33
本文介绍了如何使 Bootstrap 列的高度都相同?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Bootstrap.如何使三列高度相同?

这是问题的截图.我希望蓝色和红色列与黄色列的高度相同.

代码如下:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><div class="container-fluid"><div class="row"><div class="col-xs-4 panel" style="background-color: red">一些内容

<div class="col-xs-4 panel" style="background-color: yellow">卡兹<img width="100" height="100" src="https://lorempixel.com/100/100/cats/">

<div class="col-xs-4 panel" style="background-color: blue">还有一些内容

解决方案

使用 Bootstrap 4 的解决方案 4

Bootstrap 4 使用 Flexbox，因此不需要额外的 CSS.

演示

<div class="row"><div class="col-md-4" style="background-color: red">一些内容
<div class="col-md-4" style="background-color: yellow">卡兹<img width="100" height="100" src="https://placekitten.com/100/100/">

<div class="col-md-4" style="background-color: green">还有一些内容

使用负边距的解决方案 1(不会破坏响应能力)

演示

.row{溢出:隐藏；}[class*="col-"]{底边距:-99999px；填充底部:99999px；}

使用表格的解决方案 2

演示

.row {显示:表；}[class*="col-"] {浮动:无；显示:表格单元格；垂直对齐:顶部；}

使用 flex 的解决方案 3 于 2015 年 8 月添加.在此之前发布的评论不适用于此解决方案.

演示

.row {显示:-webkit-box；显示:-webkit-flex；显示:-ms-flexbox；显示:弹性；flex-wrap: 包裹;}.row >[class*='col-'] {显示:弹性；弹性方向:列；}

I'm using Bootstrap. How can I make three columns all the same height?

Here is a screenshot of the problem. I would like the blue and red columns to be the same height as the yellow column.

Here is the code: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>

解决方案

Solution 4 using Bootstrap 4

Bootstrap 4 uses Flexbox so there is no need for extra CSS.

Demo

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
    overflow: hidden; 
}

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

Solution 2 using table

Demo

.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.

Demo

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

这篇关于如何使 Bootstrap 列的高度都相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆