박스형 너비를 유지하면서 부트스트랩 열의 배경색을 확장하는 방법은 무엇입니까?

Bootstrap을 사용하여 배경색 확장

Bootstrap을 사용하면 배경색이 다른 열이 있는 웹사이트를 만들 수 있습니다. 그러나 이 기능을 구현할 때는 특히 대형 화면에서 콘텐츠가 정의된 부트스트랩 상자 너비 내에 유지되도록 하는 것이 중요합니다.

Bootstrap 5:

Bootstrap에서 5, 원하는 배경이 있는 열에 절대적으로 위치한 의사 요소를 사용합니다. color:

<div class="container-fluid">
    <div class="row">
        <div class="col-6 bg-info">
            <div class="row justify-content-end">
                <div class="col-9">...</div>
            </div>
        </div>
        <div class="col-6 bg-danger">
            <div class="row justify-content-start">
                <div class="col-9">...</div>
            </div>
        </div>
    </div>
</div>

Bootstrap 3:

Bootstrap 3에서는 두 번째 컨테이너 주위에 추가 래퍼 DIV를 사용합니다.

<div class="container">

의사를 사용한 예 요소:

Bootstrap 3의 경우 의사 요소를 사용하여 원하는 효과를 만들 수도 있습니다.

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

위 내용은 박스형 너비를 유지하면서 부트스트랩 열의 배경색을 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!