如何使用flex来制作具有相同高度的引导面板

Question

我使用bootstrap设置我的CSS样式有问题。我想要的是将数据列表显示在一个高度相同的面板中，就像udemy

中的课程一样

这是我的索引

<div class="row-flex>
@foreach($courses['data'] as $course)
<div class="col-lg-3">

    <div class="panel panel-default">
        <a href="{{ route('courses.show', $course['id'] ) }}">

            <div class="panel-body">
                <h4>{{ $course['title'] }}</h4>
                <p>{{ $course['description'] }}</p>
                <p>{{ $course['fee'] }}</p>
            </div>
        </a>
    </div>
</div>      
@endforeach 
</div>

和我的app.css

.flex, .flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: inline-block;
    flex:1 0 auto;
}

.panel {
   display: flex;
   flex-direction:column;
   align-content:stretch; 
}

.panel-body {
   display: flex;
   flex-grow:1;
}

任何人都可以帮我解决如何格式化获取值，例如udemy的格式。

Answer 1

父母：

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;

第一个孩子：

 display: flex;
 flex-direction: column;