我正在尝试使用 bootstrap 模拟网格，但我在放置其中一列时遇到了一个小问题。
我试过摆弄 div 和偏移/拉动的位置，但没有成功。
为了阐明我想要实现的目标，在中间的柱子中应该有三个相同高度的 block ，此时中间有一个空隙。如果可能，列应填充可用空间。类似于下面(不按比例)。
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>
最佳答案
似乎这个笨蛋帮助解决了这个问题。
关于html - Bootstrap 用列填充空白空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32627819/