부트 스트랩 레이아웃 : 기본 그리드 시스템 VS 유체 그리드 시스템

Question

테마를 수정하기 위해 CSS를 덮어 써야하는이 부트 스트랩 템플릿이 있습니다. 그러나 템플릿은 자주 사용하는 유체 그리드 시스템 대신 기본 부트 스트랩 시스템을 사용합니다. 유체 그리드 시스템은 동적이기 때문에 나머지 스팬 (.span12, .span9 등)을 재정의하지 않고도 쉽게 조정할 수 있습니다. 컨테이너 크기를 변경해야했습니다.

그러나 부트 스트랩 템플릿의 기본 그리드 시스템 (.span12, .container는 1200px와 동일 함)에도 반응하지만 기본 범위는 기본 고정 값입니다. 나는이 같은 내 CSS를 설정할 때 그래서 :

.container { 
max-width: 940px; 
padding: 0 20px; 
} 

을 그리고 이것이 내가 축소 그러나 때, 레이아웃의 나머지 부분에 대한 잘 작동하고 1200 픽셀의 웹 사이트를 확인하는 듯, 모든 장소에서 꺼집니다. 나는이 그것을 고칠 수라고 생각 :

@media (min-width: 1200px) { 
.span12, .container { 
    width: 940px; 
} 

.container { 
    padding: 0 20px; 
}} 

그러나, 그 레이아웃의 스팬의 나머지는 기본 고정 폭 여전히 용기가 이전보다 작기 때문에 서로 아래로 이동합니다. 조정하지 않으면 유체 그리드 시스템에서 원활하게 조정되는 w/c가 발생하지 않습니다.

예를 들어, 1200px 해상도에서 .span3의 너비는 여전히 270px입니다. 따라서 .span3 div 4 개를 함께 입력하면 최대 1080 픽셀이 추가됩니다. 그러나 이것은 940px의 폭과 20px의 패딩을 필요로하기 때문에 가능하지 않습니다.

Answer 1

당신이 질문에 직접 대답했다고 생각합니다. 스팬 클래스에도 고정 폭을 할당하십시오.

@media (min-width: 1200px) { 
.container { 
     width: 940px; 
     margin: 0 auto; 
    } 

.span3 { 
    width: 220px; 
} 

} 

스팬 클래스의 기본 속성은 margin-left : 20px입니다. 그래서 .container ==> 패딩 : 0 20px; 그것은 적합하지 않을 수 있습니다. 이를 위해, 당신이 도움이 span3 클래스 마진 왼쪽 0 즉

.span3:first-child { 
     margin-left: 0; 
} 

희망의 첫 번째 자식을 만들 수 있습니다.