Question

我试图在我的网站上制作一个响应的基于列的块（如＃34;面板＆＃34;在引导程序中）。我的目标是在另一个块结束时启动不同高度的块（面板） - 同时在全屏视图中同时有2个块。

因为它们没有相同的高度，当第一个块结束时 - 第二个块的底部有一个很大的空白空间 - 并且只有在第二个块结束后，第3个块才会启动。

下面的图片将描述我想说的内容。

图片1 - 第1块和第2块从同一行开始

http://i.stack.imgur.com/9b0WR.png

图片2 - 第一个区块结束，第二个区块没有 - 并且第三个区块在他结束时不在第一个区块之下。第3个块仅在第2个块结束时出现，它位于不同的列中。

http://i.stack.imgur.com/76HXF.png

我希望第一个块在第一个块结束后开始 - 没有第二个块左边的空白空白空间。

我怎么做？

我的所有歌词都是 col-md-6 。

Answer 1

你可以使用javascript和jQuery来均衡两个div的高度。所以如果你有＃div1和＃div2 ...

$.fn.equaliseHeights = function() {
	return this.height(Math.max.apply(this, $(this).map(function(i, e) {
		return $(e).height();
	}).get()));
}
$("#div1").add($("#div2")).equaliseHeights();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Bootstrap - 启动另一个结束的新列

1 个答案: