Bootstrap:一列超出固定宽度的容器?

时间:2017-12-09 00:26:31

标签: css twitter-bootstrap containers multiple-columns

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

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

enter image description here

可以吗?

1 个答案:

答案 0 :(得分:0)

我想我明白了,大约:

.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