부트 스트랩 그리드 용으로 특별히 제작되지 않은 PSD 용 부트 스트랩 그리드 사용 방법은 무엇입니까?

Question

내 질문은 다음과 유사합니다. How to make static PSD fit into Responsive Bootstrap grids

그러나 선택한 대답 (중첩 된 표)은 나를 혼란스럽게합니다. (나는 아직 코멘트를 올릴 수 없다. 아마도 다른 사람들도 더 많은 제안을 할 것이라고 생각했다.)

왼쪽에 메뉴가있는 896px의 디자인과 약 213px의 간격을두고 psd 디자인을했다고 가정 해 보겠습니다. px 다음 683 px 복용 다른 물건. 어떻게 그런 식으로 부트 스트랩 그리드를 사용할 수 있습니까? 고정 너비 열이 필요하지 않습니다. 중첩 된 그리드 접근 방식 (또는 다른 접근 방식)에 대해 자세히 설명하십시오.

그림보기 : A는 213px이고 B는 896px이고 그 사이의 간격은 10px입니다.

Answer 1

시나리오 1 : (무엇을 할 것인가) 사용해야 할 1200px 주 컨테이너와 마찬가지로 부트 스트랩의 그리드 시스템을 준수합니다. 이렇게하면 찾고자하는 레이아웃을위한 태블릿 및 모바일보기뿐만 아니라 2 개의 데스크톱보기 (크고 작음)를 제공합니다.

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3"> 
     <p>Sidebar</p> 
     </div> 
     <div class="col-sm-1"></div> 
     <div class="col-sm-8"> 
     <p>Main Content</p> 
     </div> 
    </div> 
</div> 

JS 바이올린 : http://jsfiddle.net/tzhben/hrzboLex/

시나리오 2 :

이

은 최소 베어 뼈 ... 같을 것이다 것입니다 다른 뷰포트의 양을 제한 할 896px 최대 폭을 사용하면 볼 수는 있지만 여전히 반응적입니다. 내가 여기서 한 것은 896px로 컨테이너의 너비를 덮어 쓰고 동일한 HTML/CSS를 유지하는 것입니다.

.container { 
width: 896px; 
border: 1px solid;  
} 

JS 바이올린 : http://jsfiddle.net/tzhben/b9Lyfzxd/

모두 작동하는 것. 외로움을 느끼는 "div class ="col-sm-1 "(html로)이 당신이 찾고있는 갭을 제공한다는 것을 알게된다면 CSS를 조작하는 능력에 따라 이것을 더 취할 수있는 방법이있을 수 있습니다.

희망이 도움이됩니다.

가