Question

我试图使用bootstrap模拟网格，我在放置其中一列时遇到了一些问题。

我已经尝试过放置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>

Answer 1

看起来像这样有助于解决这个问题。

http://www.bootply.com/LKWPlNHti9

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

bootstrap用列填充空白空间

2 个答案: