Html 如何制作列'；在无js/溢出解决方案的引导中，s高度相等

请在标记副本之前阅读我的问题

我有一个引导容器，其中有几个列。我想为所有div设置相同的高度

我得到的是，但是它会打破结构，而调整大小意味着没有充分利用响应能力

我知道有两种主要的解决方案：

1。Flex
2。表格/表格单元格

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

但这两种方法对我都没用。我还使用了

overflow:hidden

和

margin-bottom:-99999 px；填充底部：99999像素解决方案，但对我没有用处

我尝试过的解决方案：，但没有一个对我有用

我只是简单地创造了（通过一些答案），但当我尝试在小提琴中使用相同的方式时，它不会给出相同的输出，不知道为什么

我已经阅读了教程，也了解了更多关于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>


当前订阅：学生演示
开始日期：2016年1月1日
有效期：2016年12月31日
续费：100美元
优惠1:20%现金奖励（将记入您的账户）
续费：100美元
这对您有用吗

  .csT
{
    display: inline;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.csT div div{height:100%;}
.thisclass{height:100px;}

演示是否适合您

  .csT
{
    display: inline;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.csT div div{height:100%;}
.thisclass{height:100px;}

演示
在何处添加此类？？我在每个col-md-4类之后都添加了此类。很抱歉，布局被压碎了。选中此处我删除了显示：flex；柔性包装：包装；从cst类，但选中第5个框…线高度不是好方法，伙计。在哪里添加此类？我在每个col-md-4类之后添加。抱歉，但布局被压碎了。选中此处我删除了显示：flex；柔性包装：包装；从cst类但勾选第5个框…线的高度不是很好的方式。无论有多少行，都应该是相同的高度。。。如果是，则需要脚本，因为flexbox或table都可以这样做。您可以从可能的解决方案列表中删除flexbox。Flex等高柱仅在同一行上的同级柱之间工作。项目包装后，将为该行建立新的共享高度@在我看来，LGSon是正确的。你需要JS。这里有更多关于flex限制的内容：感谢您的评论。在我结束之前，我阅读了，链接了一些评论，并且问了一些问题，所以我不只是重复每一个问题。如果没有js/overflow，你会问我如何在保持高度不变的情况下使其响应灵敏，答案是重复的，简单地说，你不能。注意，重复不一定意味着所问的问题是相同的，它意味着给定的答案可以应用。现在，与其说我做错了，不如解释一下为什么这不是一个骗局，我将能够重新考虑，然后再打开它。如果有人说你做不到，并不意味着没有办法，…正确，而今天使用脚本的方式。如果有人后来发现了这一点，当新功能出现在CSS中时，他们能够为副本添加一个答案，然后你和其他人都可以从中受益，这就是它在这里的工作方式，所以请不要以任何其他方式看它。无论有多少行，所有行都应该是相同的高度。。。如果是，则需要脚本，因为flexbox或table都可以这样做。您可以从可能的解决方案列表中删除flexbox。Flex等高柱仅在同一行上的同级柱之间工作。项目包装后，将为该行建立新的共享高度@在我看来，LGSon是正确的。你需要JS。这里有更多关于flex限制的内容：感谢您的评论。在我结束之前，我阅读了，链接了一些评论，并且问了一些问题，所以我不只是重复每一个问题。如果没有js/overflow，你会问我如何在保持高度不变的情况下使其响应灵敏，答案是重复的，简单地说，你不能。注意，重复不一定意味着所问的问题是相同的，它意味着给定的答案可以应用。现在，与其说我做错了，不如解释一下为什么这不是一个骗局，我将能够重新考虑，然后再打开它。如果有人说你做不到，并不意味着没有办法，…正确，而今天使用脚本的方式。如果有人后来发现了这一点，当新特性出现在CSS中时，他们能够为副本添加一个答案，然后你和其他人都可以从中受益，这就是它在这里的工作方式，所以请不要以任何其他方式看它。