Question

我认为我没有尽可能清楚地问这个问题，但是这里有：

如何使引导列扩展到更大的高度，以便当列环绕时，它们会被它抵消，即使它不够高也不能正常引起。

基本上，如何让这个bootply中的bottom面板在这两种情况下保持居中？ http://www.bootply.com/FCgrUtGuQ0

我的left面板长度可变，这意味着如果我使用col-x-offset-x，如果left面板延伸到middle以下，它将被推进。

如果我将bottom面板添加到新行，那么如果面板left长于middle，则其上方会有空格。

我尝试了负边距技巧但没有成功。它可以让你改变这些例子都使用的背景颜色，但它似乎不会导致浮动的面板向右移动。

我需要这种布局在较小的屏幕尺寸下表现不同，所以我不能将middle和bottom放在同一个col-x-6中，因为这实际上是我的{ {1}}布局，lg我需要它与sm行连接，left和middle作为第二行中的两列，和right作为第三行。

负边距技巧：

bottom

Answer 1

This isn't answering my own question directly, as it doesn't explain how to expand the column height to make the repositioning happen properly, and it's not generic to all column sizes and arrangements.

But in my exact case this arrangement of columns and rows case can be solved with two master columns and then separating the contents of the second, where 3-6-3 columns can easily be made to be 3-9(4-8) columns which maintain the same 3-6-3 spacing.

http://www.bootply.com/UTq2klEuCG

By putting the var data = [ {a:44,b:2,a1:42,name:"monkey"}, {a:50,b:5,a1:45,name:"dog"}, {a:49,b:7,a1:42}, {a:41,b:6,a1:35}, {a:59,b:9,a1:50}, ], middle, and right in the second column then letting those wrap around naturally seems to handle all my cases with this specific layout.

So I went from

bottom

to

col-x-3
col-x-6
col-x-3
col-x-6

This isn't ideal, as a 2-8-2 arrangement might be best at a large screen size, but the math doesn't work to easily create a subset within the col-x-3 col-x-9 { col-x-8 col-x-4 col-x-8 } that would need that follows the same spacing as a 2-8-2.

如何使列扩展以推动其下方的列

1 个答案: