html - 跨越 Bootstrap 列

Question

我需要帮助来按照下图获取 Bootstrap 布局。我无法弄清楚如何让黄色条与 Bootstrap 容器的整个宽度一起显示，而不影响列在移动 View 上的堆叠方式(第二张图片)。

所以我不需要在移动 View 上显示黄色条，但必须保留列堆叠的顺序。我试过在中间列中插入一个 div 并强制它超出它但它并没有真正起作用(我得到的最接近的是负边距但它只是与其他列重叠而且我真的不知道我应该申请的确切数字每个边距都使它看起来不错)。

下面是我的 HTML 结构 - 我已经删除了黄色栏部分，因为我真的不知道它应该放在哪里......

<div class="col-md-4">
    col 1 header<br/>col 1 contents
</div>
<div class="col-md-4">
    col 2 header<br/>col 2 contents
</div>
<div class="col-md-4">
    col 3 header<br/>col 3 contents
</div>

如果有人可以建议是否可以使用 Bootstrap 并给我一些指导，我们将不胜感激。

Answer 1

如果 cols headers 和 yellow div 有固定的高度，你可以在 header 和 content 之间留边距，并在它们之间设置 yellow div 的绝对值