css - 是否可以使用 bootstrap 在每列中设置不同大小的行？如果是这样，如何？

Question

所以我处于有四个 div 的情况。两个 div 需要在屏幕的右侧，两个需要在屏幕的左侧。我不能将两者捆绑在另一个 div 中的每一侧，因为当它们在移动 View 中响应时，它们的定位需要被连接起来。 (在移动 View 中查看笔，您就会明白我的意思)

这是代码，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 停止的地方开始，而不是第二列顶部的 div 在每列之间留下空白的地方。 (一定要检查笔，你会看到我在处理什么)我不能有任何空白。我需要每一列中每一行的大小相互独立——因为我使用的是 Bootstrap ，所以我不确定这是否可能。有人有什么想法吗？

Answer 1

使用 Bootstrap 无法立即完成您想要完成的任务，因为您在响应式 View 中让 div 相互折叠的方式。为了说明这一点，使用 Bootstrap 可以很容易地从这里开始:

1    |    2
3    |    4

为此:

1
2
3
4

从这里开始也很容易:

1    |    2
3    |    4

为此:

1
3
2
4

但是看起来你正在尝试做的是这样的:

4
1
2
3

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

 5 (hidden)
1    |    2
3    |    4

为此:

5
1
2
3
4 (hidden)

通过应用hidden-* 类。看这个codepen based on yours .此外，您可以通过在语义上将页面分成两半(两列)然后使每个 block 成为该列内的一个 div 来消除列中行之间的空间。