Css col-md-4在具有引导功能的灵活布局中的位置错误

在解决此问题时遇到一些困难（请参见屏幕截图）。基本上，第二行的第一个单元格的高度比第七个单元格的高度大，这一事实并没有正确放置。。。有解决办法吗？我做错什么了吗

代码摘录

<div class="row">

  <!-- contribution -->
  <div class="col-xs-6 col-md-4" style="border:1px solid red;">

    <!-- pic -->
    <div class="col-xs-4 col-md-3">
      ...
    </div>

    <!-- payment -->
    <div class="col-xs-8 col-md-9">
      <div class="name">Anonymous</div>
      <div class="contributed">contributed</div>
    </div>

  </div>
  <!-- end contribution -->
</div>

...
匿名的
贡献

所有捐款都是一样的。我不能为每行使用

行

div，因为在小屏幕上，行只有2个贡献，而不是3个贡献。只使用

col-xs-6 col-md-4

而不使用

行

可以让我拥有灵活的布局

使用clearfix类

仅为所需的视口添加额外的clearfix

  <div class="clearfix visible-xs"></div>

---

无需引导，您就可以轻松解决该问题，我也一直在努力解决该问题：

正如我所体验到的，让元素以浮动的方式在一个响应良好的环境中正常运行并不容易，更像是地狱般的。 如果您希望同一“行”上的每个元素具有相同的高度，IE9及以上版本的最佳解决方案是flexbox

示例中，我们有4个盒子不适合容器，因此如果它们不适合，但保持所有相同高度（高度值未知），我们希望它们移动到新行：

检查一下这把小提琴，它会给你想要的一切。

如果需要，可在容器上涂抹col-12，但通常不会

资料来源：

---

关于flexbox的重要信息可以在这里找到：

要在Head In Cloud的答案上构建，您需要在xs和小屏幕的每第二个div（可见xs-visible sm）之后使用clearfix类，然后在中大屏幕的每第三个div（隐藏xs-hidden sm）之后使用clearfix类。要从上面复制您的示例，请执行以下操作：

<div class="row">
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix hidden-xs hidden-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix"></div> <!-- this one is needed for all screen sizes, so just use the clearfix class -->
</div>

---

如果它适用于您正在使用的内容类型，另一个选项是在这些元素上设置

min height

。这可能是一个估计值，但如果您将最小高度设置为略大于最大元素的值，那么所有这些div都将具有相同的高度，因此它们将正确堆叠，您就不必担心clearfix。这并不理想，因为如果更改内容，必须确保其仍在最小高度值范围内

我认为div的内容将div的高度推得更高。请注意，只有两个较高的div是仅有的两个具有捐赠价值的div？向其他div添加一些虚拟文本，以查看它们是否满足相同的高度。

.container {
  display: flex;
  display: -mx-flexbox;
  display: -webkit-flex;
  flex-grow: 0;
  -ms-flex-grow: 0;
  -webkit-flex-grow: 0;
  flex-wrap: wrap;

  width: 400px; /* Sample constraint */
  background-color: red; /*Visiblity */
}

.element {
  flex: none;
  width: 120px; /* Sample constraint */
  border: 1px solid blue; /*Visiblity */
}

<div class="row">
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix hidden-xs hidden-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix"></div> <!-- this one is needed for all screen sizes, so just use the clearfix class -->
</div>