引导程序用列填充空白空间答案

【问题标题】：bootstrap fill empty space with columns引导程序用列填充空白空间
【发布时间】：2015-09-17 19:01:40
【问题描述】：

我正在尝试使用引导程序模拟网格，但在放置其中一列时遇到了一点问题。

我尝试过摆弄 div 和偏移/拉动的位置，但没有成功。

为了澄清我想要实现的目标，在中间的列中应该有三个相同高度的块，目前中间有一个间隙。如果可能，列应填满可用空间。类似于下图（未按比例）。

http://www.bootply.com/KeQzWKbzPG

css

.grid-item--height2 { height: 202.5px; }
.grid-item--height5 { height: 405px; }
.grid-item--height7 { height: 607.5px; }
.tile {border:2.5px solid white; }
.blue-background {background-color:blue;}
.orange-background {background-color:orange;}

html

<html>
<body>
<div class="container-fluid">
  <div class="row-fluid">
      <div class="col-md-5 grid-item--height2 blue-background tile text-center">

      </div>

      <div class="col-md-5 grid-item--height2 blue-background tile text-center">

      </div> 

      <div class="col-md-2 grid-item--height2 orange-background tile text-center">

      </div>

      <div class="col-md-4 grid-item--height7 blue-background tile text-center">

      </div>



      <div class="col-md-4 grid-item--height2 blue-background tile text-center">

      </div>


      <div class="col-md-4 grid-item--height5 blue-background tile text-center">

      </div>


        <div class="col-md-4 grid-item--height2 blue-background tile text-center">

      </div>

      <div class="col-md-4 grid-item--height2 blue-background tile text-center">

      </div>


      <div class="col-md-4 grid-item--height2 blue-background tile text-center ">

      </div>
  </div>
</div>
</body>
</html>

【问题讨论】：

究竟是这里的问题？你真的需要高度相同的顺序吗？
@Jay 谢谢你让我知道。我还在问题本身中包含了 css 和 html
@Shivi 不幸的是，设计需要按照这个顺序。我已经设法像这样bootply.com/BvOfj7PklO 将它们整合在一起，但高层对布局并不满意
@Valeklosse：那么，你到底想要什么..？？最后三个应该一起倒？或者您希望最后一列中的第一个网格位于第二列的第二个网格下方。我们究竟需要实现什么？
这有帮助吗？ hhttp://www.bootply.com/LKWPlNHti9

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

似乎这个笨蛋帮助解决了这个问题。

http://www.bootply.com/LKWPlNHti9

【讨论】：

【解决方案2】：

Valeklosse，看看这个 Fiddle。
当您说所有 3 个相同高度的块都应该在中间列时，这就是您要在这里实现的目标吗？

<div class="container-fluid">

    <div class="row-fluid">

        <div class="col-md-5 grid-item--height2 blue-background tile text-center">
        </div>
        <div class="col-md-5 grid-item--height2 blue-background tile text-center">
        </div> 
        <div class="col-md-2 grid-item--height2 orange-background tile text-center">
        </div>
        <div class="col-md-4 grid-item--height7 blue-background tile text-center">
        </div>

    <div class="row col-md-4">  

        <div class="col-md-12 grid-item--height2 blue-background tile text-center"> 
        </div>
        <div class="col-md-12 grid-item--height2 blue-background tile text-center"> 
        </div>   
        <div class="col-md-12 grid-item--height2 blue-background tile text-center"> 
        </div>

    </div> <!-- End Row--> 

        <div class="col-md-4 grid-item--height5 blue-background tile text-center">
        </div>
        <div class="col-md-4 grid-item--height2 blue-background tile text-center ">
        </div>
    </div> <!-- End Row-Fluid-->
</div> <!-- End Container-Fluid-->

【讨论】：