我想在行中居中设置一组列，并且它们之间有相同的高度和空间，也可以在手机或其他小型设备上响应并显示垂直。
的CSS：
/* CSS used here will be applied after bootstrap.css */
.my-well {
margin: 10px;
border-radius:20px;
background-color: White;
}
@media (min-width: 480px) {
.foo {
margin: 20px !important;
}
}
/* from http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
}
/* content styles */
.inside {
margin-top: 10px;
margin-bottom: 10px;
}
.inside-full-height {
/*
// if you want to give content full height give him height: 100%;
// with content full height you can't apply margins to the content
// content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100
*/
height: 90%;
margin-top: 0;
margin-bottom: 0;
}
/* columns of same height styles */
.row-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-height {
display: table-cell;
float: none;
height: 100%;
}
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.col-bottom {
vertical-align: bottom;
}
@media (min-width: 480px) {
.row-xs-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-xs-height {
display: table-cell;
float: none;
height: 100%;
}
.col-xs-top {
vertical-align: top;
}
.col-xs-middle {
vertical-align: middle;
}
.col-xs-bottom {
vertical-align: bottom;
}
}
@media (min-width: 768px) {
.row-sm-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-sm-height {
display: table-cell;
float: none;
height: 90%;
}
.col-sm-top {
vertical-align: top;
}
.col-sm-middle {
vertical-align: middle;
}
.col-sm-bottom {
vertical-align: bottom;
}
}
@media (min-width: 992px) {
.row-md-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-md-height {
display: table-cell;
float: none;
height: 100%;
}
.col-md-top {
vertical-align: top;
}
.col-md-middle {
vertical-align: middle;
}
.col-md-bottom {
vertical-align: bottom;
}
}
@media (min-width: 1200px) {
.row-lg-height {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.col-lg-height {
display: table-cell;
float: none;
height: 100%;
}
.col-lg-top {
vertical-align: top;
}
.col-lg-middle {
vertical-align: middle;
}
.col-lg-bottom {
vertical-align: bottom;
}
}
HTML：
<div class="container" style="background-color: pink;">
<div class="row row-centered row-xs-height foo">
<div class="well my-well col-xs-11 col-sm-3 col-centered col-xs-height">
<div class="inside-full-height">
Faultily crud dear far trying yet dainty fluent sedately sent enthusiastic however and returned one much cat much beneficently selfishly evident unblushing wow after gradual raptly jeepers due under but.
</div>
</div>
<div class="well my-well col-xs-11 col-sm-3 col-centered col-xs-height">
<div class="inside-full-height">
Tautly doggedly at reserved cardinal when far magnanimously the and close wow buffalo jeepers disgracefully wow well dolorous inflexible primly that immorally.
</div>
<div></div>
</div>
<div class="well my-well col-xs-11 col-sm-3 col-centered col-xs-height">
<div class="inside-full-height">
Faultily crud dear far trying yet dainty fluent sedately sent enthusiastic however and returned one much cat much beneficently selfishly evident unblushing wow after gradual raptly jeepers due under but. Far sloth hardheaded some wherever chivalrous and far some yikes crud humane extravagantly emoted however untiringly the antelope ouch anticipative scallop off hyena played tortoise pounded.
</div>
<div></div>
</div>
</div class="row row-centered row-sm-height">
</div class="container" style="background-color: pink;">
结果：
我对手机渲染没问题，但我想在桌面视图中的项目之间留出边距。我已经搞砸了好几天了，并尝试了网络上的多种解决方案，使其成为中心和放大器。固定高度的游戏和响应能力一直困扰着我。
