스켈레톤 반응 그리드가 끊어짐 - 열이 떨어짐

Question

그래서, 나는 반응이 좋은 그리드 프레임 워크 인 스켈레톤의 데모를 가지고 놀기 시작했습니다.

내 데모 페이지에서 머리말에 H1을 8 열 div에 넣고 버튼을 8 열 그리드에 넣으려고했습니다. 이것은 16 열 컨테이너 안에 있습니다.

그러나 단추는 H1 아래로 떨어집니다.

정말 잘못 본 곳이 어디인지 알 수 없으므로 누구나 분명히 볼 수 있으면 가장 도움이 될 것입니다.

Answer 1

이 보인다 센터 여백을 바깥 쪽 여백을 유지하고 제거 첫 번째/마지막 열에 추가해야 마진을 분류 할 수 있습니다.

Answer 2

문제는 여백과 관련이 있습니다. .sixteen.columns (940px)의 width은 .eight (와이드 [460 픽셀 x 2] 너비 + [10 픽셀 x 4] 여백 = 960px) 인 두 개의 하위 하위 집합 width 및 margin을 지원하지 않는 것 같습니다. 나는 이것이 그들의 문제인지 아닌지를 알기에는 스켈레톤에 대해 충분히 알지 못하지만 그렇게 보입니다.

자녀가 어떻게 대응할 것인지 결정해야합니다. 두 가지 중 하나를 쉽게 수행 할 수 있지만 "열"맞춤에 영향을 미치는 방식은 다양합니다. 알파와 오메가 -

# 1 모든 자식 여백 줄

.sixteen > .eight.columns { 
    margin-right: 5px; 
    margin-left: 5px; 
} 

# 2는 문서가 조금 불분명처럼

.sixteen > .eight.columns:first-child { 
    margin-right: 0; 
} 

.sixteen > .eight.columns:last-child { 
    margin-left: 0; 
}