부트 스트랩 : 4 개의 span3- 축소 이미지 (반응 형 스팬 12)

span12 - span8- 컨테이너에 4 개의 미리보기 이미지를 연속적으로 배치했습니다. 슬프게도 마지막 <li>은 스크린 크기가 4 개의 축소판을 모두 한 행에 넣을 수 있지만 다음 줄로 나뉩니다. http://jsfiddle.net/PnWjT/부트 스트랩 : 4 개의 span3- 축소 이미지 (반응 형 스팬 12)

어떤 제안을하는 방법이이 문제를 해결하기 위해 :

6 배 span2 같은 다른 조합과 같은 행동은 ...

나는이 문제를 보여주는 작은 바이올린을 구축?

출처

2012-02-21 Seybsen

레이아웃 문제는 부적절하게 부트 스트랩 클래스를 스태킹한다는 것이고 레이아웃이 원하는 방식으로 작동하지 않는 이유입니다. 당신은 유체 컨테이너 사업부, .container-fluid 스택하려는

<div class="container"> 
    <div class="container-fluid"> .. </div> 
</div>

여기서, 고정 컨테이너 사업부 내에서 .container을, 이렇게하여 .container-fluid 사업부를 상쇄 :

예를 들어이 걸릴. 이 두 개의 포함 div는 원하는 레이아웃을 캡슐화하고 서로 쌓아 두지 않기 위해 사용되기 때문에 하나만 사용하십시오. 따라서 여기에

<div class="span8"> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <div class="row-fluid"> 
       ......

당신이 span8 사업부 내에서 DIV합니다 (.row-fluid 컨테이너 내에서 폭 100 %)을 span12 사업부를 스태킹 (폭 65.812 .row-fluid % 이내) 및 : 당신의 스택과 함께

또 다른 문제는 다음과 span12 div가 더 작은 컨테이너 span8 div를 오버플로하기 때문에 콘텐츠가 오른쪽으로 푸시되고 있기 때문에 변경 사항의 크기를 조정할 수 없습니다. 따라서 너비에 맞게 span div를 스택해야합니다. span12/2 = span6, span4*2 = span8, span5 + span5 = span10 등 ...

여기에 적절한 스택이 다시 적용된 demo이 있습니다. 사이드 바가 span4 div에 있고, 콘텐츠가 span8, span4 + span8 = span12 인 경우, 자신 만의 클래스를 만들지 않는 한 span12보다 높을 수는 없습니다.

출처

2012-02-22 03:32:16

_ 유체 그리드로 둘러싸 기는 조금 다릅니다. 중첩 된 열의 개수는 부모와 일치 할 필요가 없습니다. 대신 각 열이 상위 열의 100 %를 차지하므로 열이 각 수준에서 재설정됩니다. [bootstrap-docs] (http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem) 또는 나는 무엇인가 여기에서 놓치고있다?! – Seybsen

@Seybsen 각 레벨에서 열이 재설정됩니다. 즉, 브라우저의 크기를 조정하면 각 행이 상위 너비의 100 %를 차지하기 시작하지만 브라우저가 전체 화면 인 경우 여전히 부모 너비에 영향을받습니다. 이것이 그들이 '유동적'인 이유입니다. –

@AndresIlich 제가이 문제를 해결하기 위해 필요한 것은 유동적 인 레이아웃에서 각 레벨을 최대 12 개까지 추가해야한다는 것입니다. 맞습니까? – JonWells

부트 스트랩 : 4 개의 span3- 축소 이미지 (반응 형 스팬 12)

답변

관련 문제