如何让Bootstrap元素延伸到容器边界之外？

Bootstrap 中超出容器边界的元素扩展

在 Bootstrap 中，容器类决定了内容区域的宽度。然而，某些设计可能需要延伸到该容器之外的元素。以下是实现此目的的方法：

使用 CSS 伪元素

在溢出元素内创建一个 CSS 伪 ::before 元素。它将随着溢出的 div 调整高度。

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

示例：

<div class="container">
    <div class="row">
        <div class="col-lg-6 left">
            ...
        </div>
    </div>
</div>

使用绝对定位容器

将 .内容容器后面的容器流体（全角）。它将像一个“幽灵”一样延伸到边界之外。

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

示例：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h4>Content</h4>
        </div>
        <div class="col-sm-6">
            <!-- space over image -->
        </div>
    </div>
</div>
<div class="container-fluid abs">
    <div class="row h-100">
        <div class="col-sm-6 h-100">
            <!-- empty spacer -->
        </div>
        <div class="col-sm-6 right">
            <img src="image.jpg">
        </div>
    </div>
</div>

类似查询：

• 获取延伸到屏幕的具有不同背景颜色的两列边缘
• 右侧图像示例
• 左侧图像示例
• 将元素扩展到引导容器之外

以上是如何让Bootstrap元素延伸到容器边界之外？的详细内容。更多信息请关注PHP中文网其他相关文章！