css - 与Bootstrap并排放置不同大小的表单

这是我想做的事情：



这是我现在使用以下代码得到的结果：




    

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

有什么帮助吗？

最佳答案

您需要将中间元素（假设是最高元素）向右浮动。默认情况下，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>

关于css - 与Bootstrap并排放置不同大小的表单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39855784/