是否可以使用bootstrap每列具有不同大小的行？如果是这样，怎么样？

Question

所以我处于有四个div的情况。两个div需要位于屏幕的右侧，两个需要位于屏幕的左侧。我无法在另一个div中将两个捆绑在一起，因为当他们在移动视图中响应时，他们的定位需要是网状的。 （在移动视图中查看笔，你会看到我的意思）

这是代码，html在这里

<div class="col-xs-12 col-sm-8 start">Start Ride </div>
<div class="col-xs-12 col-sm-4 pull-right open">Open ride</div>
<div class="hidden-xs hidden-sm"></div>
<div class="col-xs-12 col-sm-8 pull-left rides ">Rides We have</div>
<div class="col-sm-4 hours">Hours of Operation</div>

以css为

.start { height: 125px; background: #fcc; }
.open { height: 95px; background: #fdb; }
.hours { height: 50px; background: #ffb; }
.rides { height: 150px; background: #cfc; }

和笔用于说明目的 http://codepen.io/KDweber89/pen/LVddKK?editors=110

这里的问题是，前两个div通常会改变大小。由于bootstrap的行内联功能，它会在div中创建空白区域。因此，如果一列顶部的div很高，则第二列的底部div将从高位的列开始，而不是第二列的顶部div在每列之间留下空白的位置。 （绝对检查笔，你会看到我正在处理的事情）我不能有任何白色空间。我需要每列中每行的大小彼此独立 - 因为我正在使用bootstrap，我不确定这是否可行。有没有人有任何想法？

Answer 1

你想要完成的是Bootstrap不能立即实现的，因为你在响应式视图中让div相互折叠的方式。为了说明这一点，使用Bootstrap很容易实现：

1
2
3
4

到此：

1    |    2
3    |    4

从这一点开始也很容易：

1
3
2
4

到此：

4
1
2
3

但是你想要做的就是：

 5 (hidden)
1    |    2
3    |    4

语义HTML将从左到右，从上到下阅读。解决这个问题的最佳方法是利用Bootstrap的responsive utilities，这将允许你做这样的事情：

5
1
2
3
4 (hidden)

到此：

hidden-*

应用var message = {}; 个类。见codepen based on yours。此外，您可以通过将页面在语义上分成两半（两列）然后使每个块在该列内部成为div来消除列中行之间的空间。