连续居中的div不会在引导程序3中堕落

Question

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

＆＃13;

＆＃13;

div.row {
  text-align: center;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

正如你所看到的，我希望在小屏幕上显示一个＆＃34;行＆＃34;中的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>