Bootstrap을 사용하여 다양한 배경색으로 전체 너비 열을 만드는 방법은 무엇입니까?

화면 가장자리까지 확장되는 다양한 배경색으로 열을 만드는 방법

이 레이아웃을 구현하려면 컨테이너 조합을 사용해야 합니다. 다양한 배경색과 절대 위치 지정을 사용합니다.

부트스트랩 5

옵션 1: 의사 요소 접근 방식

• 컨테이너 유체로 래퍼 컨테이너를 만들어 전체 뷰포트를 채웁니다.
• 절대 위치 지정과 함께 열에 의사 요소를 사용하여 내부에 컨테이너가 있는 듯한 느낌을 줍니다. Container-fluid.

옵션 2: 중첩 그리드 접근 방식

• container-fluid를 기본 컨테이너로 사용하세요.
• Nest 외부 열 내부의 작은 그리드 열(각각 자체 배경이 있음) color.

부트스트랩 4와 3

• 컨테이너가 포함된 래퍼 컨테이너를 만듭니다.
• 래퍼 내부에 다른 컨테이너를 만듭니다. 원하는 대로 배경색을 설정합니다.
• 여백과 패딩을 조정하여

추가 옵션: 의사 요소 기법

또는 의사 요소를 사용하여 화면 가장자리까지 확장되는 컬러 배경을 만들 수도 있습니다. . 예:

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

이 기술은 화면 가장자리까지 확장되는 색상 영역을 만드는 데 더 유연한 접근 방식을 제공하지만 콘텐츠가 겹치지 않도록 위치 지정을 신중하게 고려해야 합니다.

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