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

Question

我正在尝试使用具有以下属性的 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;
    }

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

我应该怎么做才能实现维持我的属性的响应能力？

谢谢！！

Answer 1

您没有提到具体的box 尺寸，只是说它们应该保持方形。在这种情况下，使用 margin-top:30px 对应 Bootstrap 间距宽度，并在 box 上使用 padding-bottom: 100%;。

.box {
   background: #fff;
   border-radius: 4px;
   padding-bottom: 100%;
}

.col-lg-2, .col-md-3, .col-xs-6{
    margin-top: 30px !important;
}

Bootstrap 3 demo
Bootstrap 4 demo

注意：在.box（即：width:180px;height:180px）上设置px 大小将防止框响应地调整大小。

---

您可以通过更改边距和填充来增加装订线。例如，边距是填充的两倍...

.col-lg-2, .col-md-3, .col-xs-6{
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 60px;
}

Answer 2

试试下面的代码

<div class="container">

       <div class="row">
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
       </div>
         <div class="row">
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
           <div class="col-xs-3 col-sm-4 col-md-2">
               <div class="box"></div>
           </div>
       </div>

    </div>




    body{
        background: lightblue;
    }
    .container{
        margin-top: 20px;
    }
    .box{
        height: 100px;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 10px;
        max-width: 100px;
    }