如何在这个 Bootstrap 3 网格中让 div 彼此居中？

Question

我有 6 个divs，每个都有特定的像素宽度。使用 Bootstrap 3 我希望一行/行最多有 3 个框。随着屏幕变小，它应该在一行中移动到 2 个divs，而当它变得更小时，它甚至会移动到一行中的 1 个div。我该怎么做？

我希望下面的代码能够实现这一点。 但是，不幸的是，显示在一行上的divs 没有居中。 如何让这些 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>

更新：响应this answer：所以答案现在在顶部产生视觉效果，但我正在寻找的是底部的视觉效果：

Answer 1

如果您可以使用 CSS Grid，那么您的状态就很好。看codepen预览一下，sn-p的代码好像在起作用：

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 列