bootstrap 灵活布局中 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 class

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

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

have a look clearing-bootstrap

Answer 2

你不用 bootstrap 也能轻松解决这个问题，我也一直在为这个问题苦苦挣扎：

正如我所经历的那样，拥有浮动样式的元素以使其在响应式环境中正常运行并不容易，更像是地狱。如果您希望同一 "row" 上的每个元素具有相同的高度，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 */
}

勾选这个fiddle，它会给你想要的一切。 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/

Answer 3

要建立在 Head In Cloud 的答案上，您需要在每 2nd div（visible-xs visible-sm）之后对 xs 和小屏幕使用 clearfix class，然后clearfix class 每 3rd div (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。这将是一个估计值，但如果您将最小高度设置为略大于最大元素的值，那么所有这些 div 的高度都将相同，因此它们会正确堆叠而您不会不得不担心clearfix。这并不理想，因为如果您更改内容，则必须确保它仍处于该最小高度值范围内。

bootstrap 灵活布局中 col-md-4 的错误位置

Wrong position for col-md-4 in flexible layout with bootstrap

css

layout

twitter-bootstrap-3

flexibility