使用Bootstrap将不同大小的表格并排放置

Question

以下是我要做的事情：

以下是我现在使用以下代码获取的内容：

    

<div class="col-xs-12 col-sm-6 col-md-6 centered-form">
  </div>

<div class="col-xs-12 col-sm-6 col-md-6 centered-form">
  </div>

<div class="col-xs-12 col-sm-6 col-md-6 centered-form">
  </div>

对此有何帮助？

Answer 1

你需要浮动中间元素，假设它是最高的元素，向右移动。默认情况下，col将浮动到左侧，只需覆盖它。看下面的小提琴，向右移除浮子，看看会发生什么。

.centered-form:nth-of-type(1){
  height:400px;
  background-color: blue;
}

.centered-form:nth-of-type(2){
  height:800px;
  background-color: red;
  float: right;
}

.centered-form:nth-of-type(3){
  height:400px;
  background-color: yellow;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-12 col-sm-6 col-md-6 centered-form">
</div>

<div class="col-xs-12 col-sm-6 col-md-6 centered-form">
</div>

<div class="col-xs-12 col-sm-6 col-md-6 centered-form">
</div>