부트 스트랩 : 고정 너비 컨테이너 이상으로 확장되는 하나의 열?

Question

부트 스트랩 사용하기 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