유체 레이아웃에서 겹치는 부트 스트랩 열

Question

나는 운이 좋으면 꽤 오랫동안이 일이 무엇인지 알아 내려고 노력해 왔습니다. 필자는 달성하려는 노력의 가장 기본적인 예를 내 코드에서 제외하고 내 열이 겹쳐져 있고 쌓이지 않는 이유를 파악할 수 없습니다.

실패한 jfiddle은 여기에서 찾을 수 있습니다. 예상대로 http://jsfiddle.net/rB9Md/

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4"> 
      <div style="border:1px solid black; min-width:400px; width:400px"> 
       span4 
      </div> 
     </div> 
     <div class="span4"> 
      <div style="border:1px solid red; min-width:400px; width: 400px"> 
       span4 
      </div> 
     </div> 
     <div class="span4"> 
      <div style="border:1px solid green; min-width:400px; width: 400px"> 
       span4 
      </div> 
     </div> 
    </div> 
</div> 

왜 열이 적재되지 않는다? 나는 다양한 장소에서 폭, 최대 너비, 최소 너비의 다양한 변형을 시도했지만 성공하지 못했습니다. 내가 생각할 겁니다 그 span4 열 내용이 스택 것 폭 설정보다 작게 축소 한 번 ....

Answer 1

http://jsfiddle.net/ZRpSZ/1/

다음과 같은 경우,이 경우 min-width, width 스타일을 사용하지 않으려는 당신은 그것을 피할 수 있습니다.

부트 스트랩의 span4은 이미 화면 너비의 33 % (4/12)에 해당 열을 만들거나 화면 너비가 너무 작 으면 축소합니다. 부트 스트랩을 사용할 때 그리드 시스템을 사용하여 가능한 한 열 레이아웃을 지정하고자합니다. 참고로 this을 참조하십시오.

열이 400px 너비 인 경우 항상 대부분의 화면 너비에서 나란히 표시 할 수 없습니다. 따라서 당신은 당신이 얼마나 기민하길 바라는지를 고려해야합니다.

기본 부트 스트랩 그리드 시스템

이 활성화 응답 기능이없는 940px 넓은 컨테이너 만들기, 12 열을 사용합니다. 반응 형 CSS 파일을 추가하면 그리드가 뷰포트에 따라 724px 및 1170px 와이드 인 으로 변경됩니다. 767px 뷰포트 아래에서 열은 유체가되고 세로로 스택합니다.

열이 쌓이면 max-width:400px을 설정하면 그 폭만 유지됩니다.