Wordpress에서 재단에 거터를 추가하기

Question

Foundation 3 코드에서 실행되는 Reverie베이스에서 Wordpress 테마를 디자인하기 시작했습니다. 나는 전에 테마를 만들었지 만 그리드 방법을 중심으로 머리를 쓰려고 노력하고 있는데, 특히 거터를 가장 잘 얻을 수있는 방법.

문제 :

내가 문제를 보여 배경 색상 컨텐츠 사업부와 사이드 바 사업부가 여기 내 테스트 사이트 http://diskbacker.com/

를 참조하십시오. 그들은 기본적으로 서로를 만집니다.

1. 콘텐츠 div와 사이드 바 div간에 구분을 어떻게 추가합니까?

2. 콘텐츠 및 사이드 바에 안쪽 여백을 어떻게 추가합니까?

3. 'responsive'로 이동하면 모바일 장치에서이 분리가 발생합니까?

미리 감사드립니다.

Answer 1

열이 작동 내부의 다른 사업부를 두는 경우에 ...

<div class="four columns"> 
<div style="margin:25px; background: #ccc;">test</div></div> 
<div class="eight columns">eight</div> 

또한 재단에서 클래스 .panel을 찾아서 특정 요구에 적응할 수 :

.panel { background: #f2f2f2; border: solid 1px #e6e6e6; margin: 0 0 22px 0; padding: 20px; } 
.panel > :first-child { margin-top: 0; } 
.panel > :last-child { margin-bottom: 0; } 

또는 - use foundation v2

Answer 2

나는 그리드의 사용을 설명 ZURB 재단 문서를 읽고, 먼저 추천 할 것입니다 :

http://foundation.zurb.com/docs/grid.php

하수구는 단순히 컬럼에 패딩으로 만들어집니다. 즉, 열은 25 % 또는 50 %와 같은 간단한 너비를가집니다. 패딩을 조정하면 은 거터를 조정하며 이것은 Scss 변수, 다운로드 사용자 정의 프로그램 또는 CSS 자체를 통해 제어 할 수 있습니다.

는 HTML/CSS 사이트와 마찬가지로, 그 요소의 패딩을 확인, 수정할 요소 및 사용자 정의 CSS 스타일 시트에 선택기를 식별 할 수 있습니다 예 :

.sidebar {padding:14px;} 

희망 도움이됩니다.