html - 将一组列居中并在 Bootstrap 中响应且高度相等？

Question

我想要一行中的一组列，这些列在行中居中，并且具有相同的高度和它们之间的间距，也可以响应并在手机或其他小型设备上垂直显示。

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

结果:

Desktop view

Phone view

我对手机渲染没意见，但我想要桌面 View 中元素之间的边距。我已经弄乱它​​好几天了，并尝试了来自网络的多种解决方案，让居中和固定高度与响应一起发挥作用一直困扰着我。

Answer 1

使用以下内容:

.container-row {display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;align-items: stretch;align-content: stretch;}

.container-col{
display: inline-block;
margin: 20px auto;
}

这就是我在这里所做的，例如 http://www.widest.eu/news