引导网格-具有相同水平/垂直间隙的正方形瓷砖 [英] Bootstrap Grid - Square Tiles with same horizontal/vertical gap
问题描述
我正在尝试使用具有以下属性的Bootstrap创建图块网格:
I'm trying to create a Grid of Tiles with Bootstrap with the following properties:
- 所有瓷砖都应为正方形
- 水平间隙和垂直间隙应该相同(即使在不同的屏幕宽度上,水平间隙也应相同)
- 磁贴应始终位于屏幕中间(从网站左边缘到最左磁贴的左边界的距离=从网站右边缘到最硬磁贴的右边界的距离)
它应该看起来像这样:
body{
background: #a5b5c5;
background:lightblue !important;
}
.box{
height: 180px;
width: 180px;
background: #fff;
border-radius: 4px;
}
.col-lg-2, .col-md-3, .col-xs-6{
margin-top: 12px !important;
}
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
<div class="col-lg-2 col-md-3 col-xs-6 ">
<div class="box"></div>
</div>
</div>
</div>
我应该怎么做才能保持自己的特性呢?
What should I do to accomplish a responsiveness which sustains my properties?
谢谢!
推荐答案
您没有提到特定的box
尺寸,只是它们应保持正方形.在这种情况下,请使用margin-top:30px
对应于Bootstrap装订线槽宽度,并使用padding-bottom: 100%;
对应box
.
You didn't mention specific box
dimensions, only that they should remain square. In that case, use margin-top:30px
to corresponding with the Bootstrap gutter width, and padding-bottom: 100%;
on the box
.
.box {
background: #fff;
border-radius: 4px;
padding-bottom: 100%;
}
.col-lg-2, .col-md-3, .col-xs-6{
margin-top: 30px !important;
}
注意:在.box
上设置px
大小(即:width:180px;height:180px
)将防止调整尺寸.
Note: Setting a px
size on the .box
(ie:width:180px;height:180px
) will prevent the boxes from resizing responsively.
您可以通过更改边距和填充来增加装订线.例如,保证金是填充的两倍...
You can increase the gutter by changing margins and padding. Margin is double the padding for example...
.col-lg-2, .col-md-3, .col-xs-6{
padding-left: 30px;
padding-right: 30px;
margin-top: 60px;
}
这篇关于引导网格-具有相同水平/垂直间隙的正方形瓷砖的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!