[twitter-bootstrap] Twitter 부트 스트랩을 기반으로 반응 형 디자인의 유동 또는 고정 그리드 시스템

고정 너비와 유체 너비를 결정할 때는 전체 페이지를 고려해야합니다. 일반적으로 둘 중 하나를 선택하려고합니다. 귀하의 질문에 나열된 예는 실제로 동일한 고정 너비 페이지에 있습니다. 즉, 스캐 폴딩 페이지는 고정 너비 레이아웃을 사용하고 있습니다. 스캐 폴딩 페이지 의 고정 그리드 및 유체 그리드 는 예제가 아니라 고정 및 유체 너비 레이아웃을 구현하기위한 문서입니다.

적절한 고정 너비 예제는 여기에 있습니다 . 적절한 유체 폭 예는 여기에 있습니다 .

고정 너비 예제를 관찰 할 때 브라우저 너비가 960px보다 큰 경우 컨텐츠 크기가 변경되지 않아야합니다. 이것은 페이지의 최대 (고정) 너비입니다. 고정 너비 디자인의 미디어 쿼리는 특정 스타일의 최소 너비를 지정합니다. 브라우저 창을 축소하면 레이아웃이 다른 크기로 바뀌는 것을 확인할 수 있습니다.

반대로 유동 너비 레이아웃은 브라우저 너비에 상관없이 항상 브라우저 창에 맞게 확장됩니다. 미디어 쿼리는 스타일이 변경되는시기를 나타내지 만 컨테이너 너비는 항상 고정 된 픽셀 수가 아니라 브라우저 창의 백분율입니다.

‘응답 성’미디어 쿼리가 모두 준비되었습니다. 페이지에 고정 너비 또는 유동 너비 레이아웃을 사용할지 결정하기 만하면됩니다.

이전에는 부트 스트랩 2에서 row-fluid유체 컨테이너 row내부와 고정 컨테이너 내부 를 사용해야했습니다 . 부트 스트랩 3의 도입으로 row-fluid제거되지 않았다 더 이상 할 사용 .

편집 : 의견에 따라 일부 jsFiddles 는 다음을 수행합니다.

• 유동적 인 비 응답 레이아웃 ,
• 유동적 인 반응 형 레이아웃 ,
• 고정 무응답 레이아웃 ,
• 반응 형 레이아웃 수정 .

이 바이올린은 순수한 CSS 미디어 쿼리를 기반으로 완전히 부트 스트랩이 없으므로 트위터 부트 스트랩을 사용하지 않고 유사한 솔루션을 만들려는 사람에게 좋은 출발점이됩니다.

답변

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}