Html 自举'；s栅格：具有不同高度的图元

我一直在开发一个Dynamicly向DOM添加元素的应用程序。添加的元素有两种类型：高度为50px的元素和高度为100px的元素。它们在引导网格系统的帮助下显示在中

工作示例：

<div>
  <div class="col-xs-6" style="height: 100px;">1</div>
  <div class="col-xs-6" style="height: 50px;">2</div>
  <div class="col-xs-6" style="height: 50px;">3</div>
</div>

1.
2.
3.

但当我尝试重新排列时，某些布局上会出现一些意外的空间：

<div>
  <div class="col-xs-6" style="height: 50px;">2</div>
  <div class="col-xs-6" style="height: 100px;">1</div>
  <div class="col-xs-6" style="height: 50px;">3</div>
</div>

2.
1.
3.

在元素“1”和“3”之间有一个50像素宽的间隙。元素“3”是否放置在该间隙中？

---

为什么会出现这种差距？

之所以出现这种情况，是因为您为高度添加了内联样式

style="height: 100px;
style="height: 50px;
style="height: 50px;

要更好地了解它，请看下面的示例

---

@Gaurav是正确的。。这是因为您设置了特定的

高度。当
高度：100px
列置于第二位时，它会强制#3换行，因为引导列向左浮动，但不会向右浮动

一种解决方法是在较高的（100px）列上使用
pull right
类

如果我正确理解引导，一行中的所有列加起来应该是12（这并不是说它可以解决您的问题，但我认为这是最佳做法）@knittl您是正确的；第二，如果它们在
行中，它们将有一个额外的填充和边距（因此溢出），而
容器
div将取消该填充和边距。一行中超过12列没有问题。这就是引导网格在移动设备上如此灵活的原因：