html - Bootstrap 行在另一行之上

Question

我正在稍微扩展我的前端 CSS 技能，我正在努力实现以下目标:两个重叠的 Bootstrap 行，但保持它们的响应式网格行为。对我来说完全陌生，不知道如何解决这个问题..

所以基本上我想要并排放置两列(就内容而言不断重复)，然后另一行与另一列重叠。这需要使中间列(在图像的第 2 行中)在所有红色列上可见。

我该怎么做？我当然想保留网格功能。

这是一个 JS Fiddle 我做了一个更好的理解。在我看来，网格的行为并不像它应该的那样。我也不认为 position: absolute 适合响应式网站。

我希望我的问题足够清楚!提前致谢

Answer 1

绝对位置可以，但要确保它是全高并且容器是position: relative;

{
  position: absolute;
  top: 0;
  left:0;
  z-index:1;
  bottom:0;
  right:0;
  height:100%;
}

http://www.codeply.com/go/B5mmRpPQ3y