gpt4 book ai didi

html - Bootstrap 用列填充空白空间

转载 作者:太空宇宙 更新时间:2023-11-04 02:53:23 26 4
gpt4 key购买 nike

我正在尝试使用 bootstrap 模拟网格,但我在放置其中一列时遇到了一个小问题。

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

为了阐明我想要实现的目标,在中间的柱子中应该有三个相同高度的 block ,此时中间有一个空隙。如果可能,列应填充可用空间。类似于下面(不按比例)。

enter image description here

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>

最佳答案

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

http://www.bootply.com/LKWPlNHti9

关于html - Bootstrap 用列填充空白空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32627819/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com