컨테이너 너머로 부트스트랩 행을 확장하는 방법은 무엇입니까?

컨테이너 너머로 Bootstrap 행 확장

문제 설명

Bootstrap의 그리드 시스템은 반응형 레이아웃을 생성하는 편리한 방법을 제공합니다. 그러나 어떤 경우에는 컨테이너 너비를 넘어 요소를 확장해야 하는 상황이 발생할 수 있습니다. 이는 원하는 디자인을 얻는 데 어려움을 겪을 수 있습니다.

해결책

옵션 1: CSS 의사 요소 사용

다음을 사용하여 의사 ::before 요소를 만듭니다. 컨테이너 너비를 지나 확장되는 음수 왼쪽 오프셋입니다. 이 요소는 대상 요소를 컨테이너 너머로 밀어내는 스페이서 역할을 합니다.

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.left:before {
    left: -999em;
    background: red;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

옵션 2: 절대 위치 컨테이너 사용

다음과 함께 컨테이너 유체를 사용합니다. "유령" 역할을 하는 기본 컨테이너 뒤의 화면 가장자리까지 확장되는 절대 위치 지정 컨테이너.

.abs {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
}

추가 리소스

• [Codeply 데모(옵션 1)](http://codeply.com/go/C80RYwhWrc)
• [ Codeply 데모(옵션 2)](https://codeply.com/go/txUHH72f16)
• [관련 예: 화면 가장자리까지 확장되는 서로 다른 배경색을 가진 두 개의 열 가져오기](https://stackoverflow.com/a/ 35627548)

위 내용은 컨테이너 너머로 부트스트랩 행을 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!