Bootstrap网格系统-相同水平/垂直间距的正方形瓷砖

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>

我应该做些什么来实现一个能够维护我的属性的响应性呢？

谢谢！

- RoyalRagger

---

可能是重复的问题：https://dev59.com/3WEi5IYBdhLWcg3wZ7ga - Carol Skelly

Answer 1

您没有提及具体的盒子尺寸，只是要求它们保持正方形。在这种情况下，使用margin-top:30px与Bootstrap栅格宽度相对应，并在盒子上使用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演示
Bootstrap 4演示

注意：在.box上设置px大小（例如：width:180px;height:180px）将防止盒子响应式调整大小。

---

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

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

- Zim

---

如果我想编辑间隙的大小，我可以更改列的边距，但这并不能完全解决问题。我如何控制间隙的水平大小？这是否可能？ - RoyalRagger

是的，margin-top将是左/右填充的两倍。默认情况下，填充为15px，因此margin-top为30px。但您可以根据需要进行更改。我更新了答案。 - Carol Skelly

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

- DPS