컨테이너 너머로 부트스트랩 행을 확장하려면 어떻게 해야 합니까?

컨테이너 외부에서 Bootstrap 행 확장

Bootstrap에서 요소는 .container 클래스 내에 정의된 행 내에 포함됩니다. 그러나 컨테이너 너머로 행을 확장해야 하는 경우가 있을 수 있습니다.

이를 달성하는 한 가지 방법은 CSS 의사 요소를 활용하는 것입니다. 높이와 일치하는 왼쪽 열(왼쪽 클래스)에 대해 ::before 요소를 만듭니다. 이 요소는 왼쪽으로 확장됩니다.

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

또 다른 접근 방식은 콘텐츠 .container 뒤에 절대 위치 .container-fluid를 사용하는 것입니다. 이 "고스트" 컨테이너는 행의 너비를 확장합니다.

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

이러한 솔루션을 사용하면 컨테이너 너머로 행을 확장하여 디자인에 유연성을 제공할 수 있습니다.

위 내용은 컨테이너 너머로 부트스트랩 행을 확장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!