부트스트랩 요소를 컨테이너 경계 너머로 확장하는 방법은 무엇입니까?

Bootstrap의 컨테이너 경계를 넘어서는 요소 확장

Bootstrap에서 컨테이너 클래스는 콘텐츠 영역의 너비를 결정합니다. 그러나 특정 디자인에는 이 컨테이너 이상으로 확장되는 요소가 필요할 수 있습니다. 이를 달성하는 방법은 다음과 같습니다.

CSS 의사 요소 사용

오버플로된 요소 내에 CSS 의사 ::before 요소를 만듭니다. 넘치는 div와 함께 높이가 조정됩니다.

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

예:

<div class="container">
    <div class="row">
        <div class="col-lg-6 left">
            ...
        </div>
    </div>
</div>

절대 위치 컨테이너 사용

위치 a . 콘텐츠 컨테이너 뒤의 컨테이너 유체(전폭)입니다. 경계를 넘어 확장되는 '유령' 역할을 하게 됩니다.

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

예:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h4>Content</h4>
        </div>
        <div class="col-sm-6">
            <!-- space over image -->
        </div>
    </div>
</div>
<div class="container-fluid abs">
    <div class="row h-100">
        <div class="col-sm-6 h-100">
            <!-- empty spacer -->
        </div>
        <div class="col-sm-6 right">
            <img src="image.jpg">
        </div>
    </div>
</div>

유사 문의:

• 화면으로 확장되는 배경색이 다른 두 개의 열을 가져옵니다. edge
• 오른쪽 이미지의 예
• 왼쪽 이미지의 예
• 부트스트랩 컨테이너 너머로 요소 확장

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