Как расположить центр div рядом друг с другом в этой сетке Bootstrap 3?

Question

У меня есть 6 div с, каждый из которых имеет определенную c ширину в количестве пикселей. Используя Bootstrap 3, я бы хотел иметь максимум 3 поля в одной строке / строке. Когда экран становится меньше, он должен двигаться до 2 div с на одной строке, а когда он становится еще меньше, просто на 1 div на строке. Как я могу это сделать?

Я ожидал, что приведенный ниже код достигнет этого. Однако div, отображаемые в одной строке, к сожалению, не центрированы. Как центрировать эти элементы?

.mainDiv {
    margin: 0 auto;
}

.specificWidthInNumberOfPixels {
    border: 14px solid #dd5;
    width: 160px;
    height: 160px; 
    padding: 15px;
    text-align: center;
    margin: 5px;
}

.float {
    float: left;
    display: table;
    margin: auto;
}

<div class="mainDiv container-fluid">

   <div class="col-xs-12 col-sm-12" style="">
     <p style="text-align: center;">Header</p>
   </div>

   <div class="row" style="max-width: 700px; float: none; display: table; margin: auto; background-color: #000;">

      <div class="col-xs-6 col-sm-4 float">
        <div class="specificWidthInNumberOfPixels">
          <p>Text</p>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 float">
        <div class="specificWidthInNumberOfPixels">
          <p>Text</p>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 float">
        <div class="specificWidthInNumberOfPixels">
          <p>Text</p>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 float">
        <div class="specificWidthInNumberOfPixels">
          <p>Text</p>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 float">
        <div class="specificWidthInNumberOfPixels">
          <p>Text</p>
        </div>
      </div>

      <div class="col-xs-6 col-sm-4 float">
        <div class="specificWidthInNumberOfPixels">
          <p>Text</p>
        </div>
      </div>

   </div>
</div>

Обновление: В ответ на этот ответ : таким образом, ответ теперь создает визуальный элемент сверху, но вместо этого я ищу визуальный элемент внизу:

Answer 1

Если вы можете использовать CSS Grid, вы в хорошей форме. Посмотрите на codepen, чтобы просмотреть его, фрагмент кода выглядит так:

https://codepen.io/tobyinternet/pen/bGdoBEr

.mainDiv {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.row-grid:before, .row-grid:after {
display: none;
}

.row-grid {
margin: 0 auto;
width:100%;
max-width: 500px;
display: grid !important;
grid-template-columns: repeat(auto-fit,160px);
column-gap: 10px;
row-gap: 10px;
justify-content: center;
}

.specificWidthInNumberOfPixels {
    border: 14px solid #dd5;
    width: 160px;
    height: 160px; 
    padding: 15px;
    text-align: center;
}

p {
color: white;
}

<div class="mainDiv container-fluid">

<div class="col-xs-12 col-sm-12" style="">
    <p style="text-align: center;">Header</p>
</div>

<div class="row row-grid" style="background-color: #000;">

    <div class="col">
        <div class="specificWidthInNumberOfPixels">
        <p>Text</p>
        </div>
    </div>

    <div class="col">
        <div class="specificWidthInNumberOfPixels">
        <p>Text</p>
        </div>
    </div>

    <div class="col">
        <div class="specificWidthInNumberOfPixels">
        <p>Text</p>
        </div>
    </div>

    <div class="col">
        <div class="specificWidthInNumberOfPixels">
        <p>Text</p>
        </div>
    </div>

    <div class="col">
        <div class="specificWidthInNumberOfPixels">
        <p>Text</p>
        </div>
    </div>

    <div class="col">
        <div class="specificWidthInNumberOfPixels">
        <p>Text</p>
        </div>
    </div>

</div>
</div>

Answer 2

Вы должны обернуть их в контейнер-жидкость или класс контейнера с дочерним элементом строки, например:

<div class="container-fluid">
  <div class="row">
 <div class="col-xs-6 col-sm-4">
    <div class="specificWidthInNumberOfPixels">
      <p>Text</p>
    </div>
  </div>
 <div class="col-xs-6 col-sm-4">
    <div class="specificWidthInNumberOfPixels">
      <p>Text</p>
    </div>
  </div>
 <div class="col-xs-6 col-sm-4">
    <div class="specificWidthInNumberOfPixels">
      <p>Text</p>
    </div>
  </div>
  </div>
</div>

Это отобразит 1 строку из 3 столбцов. Добавьте вторую строку в контейнере div с теми же 3 столбцами, чтобы отобразить вторую строку из 3 столбцов