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

Question

我有 6 个 div，每个都有特定的像素宽度。使用 Bootstrap 3 我想在一个 row/line 上最多放置 3 个盒子。随着屏幕变小，它应该在一行上移动到 2 div 秒，而当它变得更小时，它应该在一行上移动 1 div 秒。我该怎么做？

我希望下面的代码能够实现这一点。但是，不幸的是，显示在一行中的 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

您应该将它们包裹在容器流体或容器 class 中，并带有一个行子元素，如下所示：

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

Answer 2

如果你可以使用 CSS 网格，那你就很好了。在 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>

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

How to get div's centered next to each other in this Bootstrap 3 grid?

css

responsive-design

twitter-bootstrap

twitter-bootstrap-3