Bootstrap을 사용하여 배경색이 다른 전체 화면 2열 레이아웃을 만드는 방법은 무엇입니까?

화면 가장자리까지 이어지는 서로 다른 배경색으로 두 개의 열을 만드는 방법

문제:

웹페이지에 두 개의 열을 만들고 각각 고유한 배경색을 사용하여 다음 열까지 확장하려고 합니다. 화면 가장자리. 그러나 열의 내용은 Bootstrap 그리드 시스템의 고정 너비 내에 있어야 합니다.

해결책:

Bootstrap 5 베타 사용:

부트스트랩에서도 개념은 유사합니다. 5:

• 열의 절대 위치에 의사 요소를 사용하여 컨테이너 유체 내에 컨테이너가 있는 듯한 느낌을 줍니다.

부트스트랩 5의 예 베타:

<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 5의 대안:

• 컨테이너 유체를 활용하고 외부 열 내에 더 작은 그리드 열을 삽입합니다. 배경색입니다.

사용 Bootstrap 4:

개념은 Bootstrap 5와 유사하지만 "-xs-" 접미사가 없습니다.

Bootstrap 4의 예:

<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>

부트스트랩 사용 3:

다른 래퍼 DIV 내에 두 번째 컨테이너 래핑:

<div class="container">

Bootstrap 3에서 의사 요소 활용:

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

위 내용은 Bootstrap을 사용하여 배경색이 다른 전체 화면 2열 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!