小编Roy*_*ger的帖子

Bootstrap Grid - 具有相同水平/垂直间隙的方形瓷砖

我正在尝试使用 Bootstrap 创建一个具有以下属性的瓷砖网格：

所有瓷砖都应该是正方形
水平和垂直间隙应该相同（即使在不同屏幕宽度上比较相同）
图块应始终居中在屏幕中间（从网站的左边缘到最左边的图块的左边框的距离 = 从网站的右边缘到最右边的图块的右边框的距离）

它应该是这样的：

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;
    }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap responsive

Roy*_*ger

2018 04-06

5
推荐指数

1
解决办法

6040
查看次数