1

在解决此问题时遇到一些困难（请参见屏幕截图）。基本上，第二行中的第一个单元格具有更大的高度，第 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-4withoutrows可以让我拥有灵活的布局。

在此处输入图像描述

4

3 回答 3

1

使用 clearfix 类

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

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

看看clearing-bootstrap

于 2016-02-08T15:37:26.657 回答
1

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

于 2016-02-08T16:03:56.493 回答
0

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

正如我所经历的那样，拥有浮动样式的元素以便它们在响应式环境中正常运行并不容易，更像是地狱般的。如果您希望同一“行”上的每个元素都具有相同的高度，则 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，但通常不需要。

资料来源：自动兄弟 div 中的 CSS 高度 100% 在 Chrome 中不起作用

可以在这里找到有关 flexbox 的重要信息：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2016-02-08T15:37:37.087 回答