提问者:小点点

如何在没有js/overflow解决方案的情况下使引导中的列高度相等[duplicate]


请先阅读我的问题,然后再做标记

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

我得到的是这个,但是它会打破结构,而调整大小意味着不使用全响应。

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

1.柔性
2。表格/表格单元格

但这两种方法对我都没用。我还使用了overflow:hiddenmargin-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>

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