我去了这里,并按照步骤操作
Border on equal height columns with Bootstrap flex
在这里创建了自己的小提琴。
我想在移动设备上设置一组将2叠起来的列,但始终保持与最高元素相同的高度。
我试图重新创建小提琴,但是我对CSS flex缺乏基本的了解。
https://jsfiddle.net/galnova/z9wjnve3/
我的HTML
<row class="col-xs-12 outer_wrap nill">
<div class="col-xs-6 col-sm-3 pannel">
<div class="col-xs-12 pannel_inner">
<h4>Title One</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat, dolor eu sagittis luctus, nibh orci tristique nibh, quis facilisis nisl dolor sed purus.<br/></br/>Suspendisse mollis pretium quam, et tempor sapien congue id. Nunc suscipit eros laoreet nisi placerat dapibus. Quisque tempus magna metus
</p>
<button class="btn btn-secondary col-xs-12">Button</button>
</div>
</div>
<div class="col-xs-6 col-sm-3 pannel">
<div class="col-xs-12 pannel_inner">
<h4>Title One</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat, dolor eu sagittis luctus
</p>
<button class="btn btn-secondary col-xs-12">Button</button>
</div>
</div>
<div class="col-xs-6 col-sm-3 pannel">
<div class="col-xs-12 pannel_inner">
<h4>Title One</h4>
<p>
Suspendisse mollis pretium quam, et tempor sapien congue id. Nunc suscipit eros laoreet nisi placerat dapibus. Quisque tempus magna metus
</p>
<button class="btn btn-secondary col-xs-12">Button</button>
</div>
</div>
<div class="col-xs-6 col-sm-3 pannel">
<div class="col-xs-12 pannel_inner">
<h4>Title One</h4>
<p>
Suspendisse mollis pretium quam, et tempor sapien congue id. Nunc suscipit eros laoreet nisi placerat dapibus.
</p>
<button class="btn btn-secondary col-xs-12">Button</button>
</div>
</div>
</row>
我的CSS
.outer_wrap { /* display: flex; flex-wrap: wrap; overflow: hidden; position: relative; border: solid 1px grey; margin: 15px; */ }
.pannel { padding: 15px; display: flex; flex-wrap: wrap; }
.pannel:after,
.pannel:before {
display: flex;
}
.pannel h4 { text-align: center; padding-top: 15px; padding-bottom: 15px; background: #eee; margin-left: -15px; margin-right: -15px; }
.pannel_inner { background: pink; border: solid 1px green; padding-bottom: 15px; display: flex; flex-direction: column; }
/* .pannel_inner p { background: red; display: flex; flex: 1; } */
.nill {
padding: 0;
margin: 0;
}