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, и padding-bottom: 100%; на box,

.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 демо

Примечание: настройка px размер на .box (То есть:width:180px;height:180px) предотвратит изменение размеров ящиков.

---

Вы можете увеличить желоб, изменив поля и отступы. Маржа в два раза больше отступов, например...

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