Question

我一直在研究一个动态添加元素到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>

但是当我尝试重新排列时，某些布局会出现一些意想不到的空格：

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

元素之间＆＃39; 1＆＃39;和＆＃39; 3＆＃39;差距为50px。元素＆＃39; 3＆＃39;是否有任何安排？放在那个空隙？为什么会出现这种差距？

Answer 1

这种情况正在发生，因为您已为高度添加了内联样式。

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

要知道它更好看这里的例子 jsfiddle 1 jsfiddle 2

Answer 2

@Gaurav是正确的..它正在发生，因为你有特定的height集。当height:100px col置于第2位时，它会强制＃3换行到新行，因为Bootstrap colums向左浮动，但不会向右浮动。

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

http://bootply.com/129818

Bootstrap的网格：具有不同高度的元素

2 个答案: