부트 스트랩 4는 더 많은 크기의 공간을 추가합니다.

Question

웹 프로젝트의 한가운데, 섹션 간 공간이 80px입니다. 부트 스트랩 스페이서에 하나 이상의 옵션을 만들고 싶습니다.

section { 
    padding: 0 80px; 
} 

부트 스트랩 스페이서 3em에 .25em 범위 내가 포함 된 .p-6 클래스를 만들고 싶습니다

(.P-5 = 40px) : 내가 말대꾸 코드에서이 순간을 위해

5em (80 픽셀)

이상은 다음과 같습니다

<section class="py-5 py-md-6"> 

활동 기지 tstrap 나는 CDN을 통해 연결했다. 변수로 이것을 어떻게 생성하는지, 어떻게 든 그것을 boostrap CSS에 통합하는 방법을 상상할 수는 없습니다. 어떤 단서를 주실 수 있습니까?

Answer 1

당신이하는 SCS를 사용한 경우, 당신은 단순히 ... 부트 스트랩 컴파일하기 전에

$spacers: (
    0: 0, 
    1: ($spacer * .25), 
    2: ($spacer * .5), 
    3: $spacer, 
    4: ($spacer * 1.5), 
    5: ($spacer * 3), 
    6: ($spacer * 5) 
) 

같은 뭔가를 $ 스페이서 변수에 다른 항목을 추가 할 수 있습니다 위의 촬영과 이후 https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L100

에서 수정 CSS 만 사용하는 것처럼 들리면 자신이 직접 패턴을 정의 할 수 있으므로 자신의 CSS에 클래스 집합을 추가하십시오 (아래 참조, https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L6937에서 가져 와서 수정).

.pt-6, 
.py-6 { 
    padding-top: 5rem !important; 
} 

.pr-6, 
.px-6 { 
    padding-right: 5rem !important; 
} 

.pb-6, 
.py-6 { 
    padding-bottom: 5rem !important; 
} 

.pl-6, 
.px-6 { 
    padding-left: 5rem !important; 
} 

특히 당신이 매체 중단 사람을 원한다면, 당신은 내가 추측 x 80 픽셀을 줄 것 부트 스트랩 마진과 패딩을 혼합

@media (min-width: 768px) { 
    .pt-md-6, 
    .py-md-6 { 
     padding-top: 5rem !important; 
    } 

    .pr-md-6, 
    .px-md-6 { 
     padding-right: 5rem !important; 
    } 

    .pb-md-6, 
    .py-md-6 { 
     padding-bottom: 5rem !important; 
    } 

    .pl-md-6, 
    .px-md-6 { 
     padding-left: 5rem !important; 
    } 
}