col-md-4在带引导程序的灵活布局中的错误位置

Question

在解决此问题时遇到一些困难（见截图）。基本上，第二行中的第一个单元格具有更大的高度，第7个单元格没有正确放置...任何变通方法？有什么我做错了吗？

代码提取

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

所有贡献都是一样的。我不能为每一行使用row div，因为在小屏幕上行只有2个贡献而不是3个。仅使用col-xs-6 col-md-4而不使用rows可以让我灵活变通布局。

Answer 1

使用clearfix类

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

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

have a look clearing-bootstrap

Answer 2

要在Head In Cloud的答案上构建，你需要在xs和小屏幕的每个第二个div（visible-xs visible-sm）之后使用clearfix类，然后在每个第3个div之后使用clearfix类（hidden-xs hidden-sm）适用于中型和大型屏幕。要从上面重现您的示例：

<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。这将是一个估计值，但是如果你将min-height设置为略大于你的最大元素的值，那么所有这些div都将是相同的高度，所以它们会正确堆叠，你不必担心关于clearfix。这不是理想的，因为如果您更改了内容，则必须确保它仍然在该最小高度值范围内。

Answer 3

你可以在没有bootstrap的情况下轻松处理这个问题，我一直在努力解决这个问题：

正如我所经历的那样，拥有浮动风格的元素，因此它们在响应环境中表现得恰到好处并不容易，更像是地狱般的。 如果你想要同一个“行”上的每个元素具有相同的高度，那么IE9及以上版本的最佳方法就是flexbox。

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

<div class="container">
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
    <p>
      Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </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 */
}

检查这个小提琴，它会给你想要的一切。 https://jsfiddle.net/upamget0/

如果需要，将col-12应用于容器，但通常不是。

来源：CSS height 100% in automatic brother div not working in Chrome

有关flexbox的详细信息，请访问：https://css-tricks.com/snippets/css/a-guide-to-flexbox/