Bootstrap 박스형 콘텐츠로 두 개의 전체 화면 배경 열을 만드는 방법은 무엇입니까?

화면 가장자리까지 확장되는 서로 다른 배경색을 가진 두 개의 열 얻기

문제 이해

목표는 다음을 만드는 것입니다. 열 내의 콘텐츠가 정의된 부트스트랩 박스 내에 유지되도록 하면서 화면 가장자리까지 확장되는 서로 다른 배경색을 갖는 두 개의 열이 있는 웹 페이지 레이아웃 width.

Bootstrap 3 솔루션

Bootstrap 3에서 권장되는 접근 방식은 두 번째 컨테이너 주위에 또 다른 래퍼 DIV를 사용하는 것입니다. 이렇게 하면 두 번째 컨테이너가 가장 바깥쪽 래퍼의 너비를 상속하는 동시에 래퍼의 배경색을 화면 가장자리까지 확장할 수 있습니다.

<div class="container">

부트스트랩 4 및 5 솔루션

부트스트랩 4 및 5에서 선호되는 방법은 컨테이너 유체 클래스를 사용하고 외부 열 내에 더 작은 그리드 열을 중첩하여 다음을 달성하는 것입니다.

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

추가 옵션

유사한 효과를 얻는 또 다른 방법은 .right:before와 같은 의사 요소를 사용하여 컨테이너 너비를 넘어서 확장되는 컬러 배경의 모습.

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

이 방법은 Bootstrap 3 이상에도 적용할 수 있습니다. 버전입니다.

위 내용은 Bootstrap 박스형 콘텐츠로 두 개의 전체 화면 배경 열을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!