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

【问题标题】：Bootstrap: One column extending beyond fixed-width container?Bootstrap：一列超出固定宽度的容器？
【发布时间】：2018-05-23 06:29:31
【问题描述】：

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

希望这张图片能解释它：

可以吗？

【问题讨论】：

我的朋友什么都可以做？？？？

标签： css twitter-bootstrap containers multiple-columns

【解决方案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

【讨论】：