如何在没有 js/溢出解决方案的情况下在引导程序中使列的高度相等

Question

请在标记重复之前阅读我的问题

我有bootstrap容器，其中我的列很少。我想修复所有Div的相同高度

我得到的是，但是它会破坏结构，而调整大小意味着不充分使用响应能力。

我知道有2个主要解决方案：

1。flex
2。表/表格

，但两者都对我没有用。我还使用了overflow:hidden和margin-bottom: -99999px;padding-bottom: 99999px;解决方案，但对我没有用。

我尝试过的解决方案：这个，这个，但它们对我来说都不是有用的。

我只是创建了小提琴（通过某种答案），但是当我尝试在小提琴中使用相同的方式时，它不给出相同的输出，不知道为什么。

我已经阅读了本教程，并且也经过了此教程，以了解有关Flex的更多信息，但它们都不对我有用。

所以我的最后小提琴是这个。请检查这个，让我知道如何在保持相同身高的同时响应良好。

CSS

 .bg-gray {
    color: #666;
    background: #efefef;
}
.mrg10T {
    margin-top: 10px !important;
}
.mrg10A {
    margin: 10px !important;
}
.csT
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
.csT div div{height:100%;}

html

<div class="row mrg10T csT">
        <div class="text-left col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Current subscription</div><div class="col-md-6 col-sm-6 col-xs-6">: Student Demo</div>
        </div>  
       </div>
       <div class="text-left col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Start date</div><div class="col-md-6 col-sm-6 col-xs-6">: 1st-Jan-2016</div>
        </div>  
       </div>
       <div class="text-left  col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Expiry date</div><div class="col-md-6 col-sm-6 col-xs-6">: 31st-Dec-2016</div>
        </div>  
       </div>
       <div style="clear:both;">
       </div>
       </div>
       <div class="row mrg10T csT">
       <div class="text-left col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Renewal pricing</div><div class="col-md-6 col-sm-6 col-xs-6">: $100</div>
        </div>  
       </div>
       <div class="text-left col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Offers 1</div><div class="col-md-6 col-sm-6 col-xs-6">: 20% cash incentive (will be credited to your account)</div>
        </div>  
       </div>
       <div class="text-left  col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Renewal pricing</div><div class="col-md-6 col-sm-6 col-xs-6">: $100</div>
        </div>  
       </div>
       <div style="clear:both;">
       </div>
    </div>

Answer 1

为您工作。

  .csT
{
    display: inline;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
.csT div div{height:100%;}
.thisclass{height:100px;}

演示https://jsfiddle.net/norcaljohnny/jeaxycv8/2/