Bootstrap：一列超出固定宽度的容器？

Question

使用Bootstrap 4.我有一个使用固定宽度容器的站点。在某些页面上，我希望行的左侧部分只包含一个图像（img标签或div上的背景，我此时并不特别），我希望该图像延伸到固定宽度之外容器到窗口的边缘。右边部分是我想保留在容器中的文本。

希望这张图片能够解释它：

可以吗？

Answer 1

我想我明白了，大约：

.left-bleed {
    margin-left: calc(-100vw / 2);
}

<figure class="left-bleed">
    <img src="https://source.unsplash.com/KUfkX6gVwBU/2600x800">
</figure>

这会将图像拉出容器并移到视口的左边缘。

有用的消息来源：

https://css-tricks.com/full-width-containers-limited-width-parents/ https://codepen.io/mor10/pen/baYLEB