将 Bootstrap 3 列背景拖到浏览器的一侧

Question

我正在尝试将 .black 列的黑色背景拉伸到浏览器的左侧。我不确定如何在不将容器设置为流体容器的情况下完成此操作。

Bootply example

有办法吗？我避免使用流体容器，因为内容必须是固定宽度的。

Answer 1

这可以通过在容器标记之后添加一个绝对定位的 div 黑色背景容器并使容器相对来实现。

HTML

<div class="container relative">
<div class="col-md-3 black fill"></div>

CSS

.relative {
    position: relative;
}

.fill {
    position: absolute;
    top:0;
    left:-25%;
    height:100%;
}

这是一个有效的 example。

说明

1. 绝对定位元素基本上浮动在 html 文档中，并根据浏览器 window 根据顶部、左侧、右侧、底部值定位自己。
2. 但是，如果绝对定位元素的祖先是相对定位的，那么绝对定位元素会将自己 相对 放置到父容器中，因此 relative css class 用于 bootstrap 容器。
3. 因为根据col-md-3class，绝对定位div的宽度是25%，为了补偿bootstrap容器的左边距，我们使用对于我们的绝对定位 div.
，negative 左值为 25%
4. 需要 100% 的高度才能将黑色背景容器对齐到 bootstrap 容器高度。

上述 CSS 样式属性在适当组合时可以产生所需的结果。