twitter-bootstrap-3 - 连续居中 div 在 bootstrap 3 中效果不佳

Question

我在 row 中有 4 个 div，如下所示:

div.row {
  text-align: center;
}

div.row>div {
  width: 300px;
  border: 1px solid red;
  padding: 20px;
  display: inline-block;
  float: none;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
      <p>ggeggweg</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <p>ggeggweg fwwfffwfw fwfwff f wfwf wffw fwfw f ww fw fw wf fw fw fw fw wf f</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <p>ggeggweg fwfwfwf fw ff wf wfwfwf wf wf wf </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <p>ggeggweg</p>
    </div>
  </div>
</div>

如您所见，我希望在小屏幕上显示“行”中的 2 个 div，但由于它们没有相同的内容，因此在小屏幕上看起来不太好(当有 2 个行时) .

基本上 float:none 把它们弄乱了，但如果没有这条规则，div 就不会居中。

Answer 1

div.equalHeight {
  display: flex;
  flex-wrap: wrap;
}
.inner{
  margin:auto;
}

通过在列内添加 div class="inner" 稍微编辑您的 HTML，这将允许您设置自定义宽度。

div.row>div {
  border: 1px solid red;
  padding: 20px;
}

div.equalHeight {
  display: flex;
  flex-wrap: wrap;
}

.inner {
  width: 150px;
  margin: auto;
  border: 2px solid blue;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class=" row equalHeight">
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>ggeggweg</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>THis is a very Big Box. It will take too much of your space. And will grow, keep growing and growing and growing.................</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>ggeggweg km knka kmasd ibiasd oijasd jbabsd kjkas </p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>ggeggweg</p>
      </div>
    </div>
  </div>
</div>