如何将引导行扩展到其容器之外？

将 Bootstrap 行扩展到容器之外

问题描述

Bootstrap 的网格系统提供了一种创建响应式布局的便捷方法。但是，在某些情况下，您可能会遇到需要元素超出容器宽度的情况。这可能会给实现所需设计带来挑战。

解决方案

选项 1：使用 CSS 伪元素

使用以下命令创建伪 ::before 元素超出容器宽度的负左偏移量。该元素将充当间隔物，将目标元素推到容器之外。

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.left:before {
    left: -999em;
    background: red;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

选项 2：使用绝对定位容器

使用容器流体绝对定位延伸到主容器后面的屏幕边缘，充当“幽灵”

.abs {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
}

其他资源

• [Codeply 演示（选项 1）](http://codeply.com/go/C80RYwhWrc)
• [ Codeply 演示（选项2)](https://codeply.com/go/txUHH72f16)
• [相关示例：获取延伸到屏幕边缘的不同背景颜色的两列](https://stackoverflow.com/a/ 35627548)

以上是如何将引导行扩展到其容器之外？的详细内容。更多信息请关注PHP中文网其他相关文章！