ℙℕℤℝ 2013-10-30 23:31
浏览 415
已采纳

我怎样才能使系鞋带的柱子都一样高呢?

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.

Three bootstrap columns with the center column longer than the other two columns

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>

</div>

转载于:https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height

  • 写回答

29条回答 默认 最新

  • 程序go 2013-10-30 23:38
    关注

    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;
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(28条)

报告相同问题?