css - 将不同大小的表格与 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 会向左浮动，只需覆盖它即可。看下面的 fiddle ，把 float 移开，看看会发生什么。

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