Zurb Foundation : 열 사이의 패딩 변경

Question

HTML/CSS 코딩에 익숙하지 않지만 지금까지 Foundation 프런트 엔드로 작업하는 것을 좋아했습니다. 작은 문제가 있습니다 : 행 내의 열 요소 사이의 여백을 어떻게 변경합니까?

문제의 페이지에서 찾을 수 있습니다

www.myfootprintcalculator.com 

행 중 하나에 대한 코드는 다음과 같습니다

<!--fourthrow><!--> 

<div class="row"> 

<div class="large-3 columns" style="text-align: center;"> 
<a href="trash.html"><img src="metro_tiles/trash.png"></a> 
</div> 

<div class="large-3 columns" style="text-align: center;"> 
<a href="water.html"><img src="metro_tiles/water.png"></a> 
</div> 

<div class="large-3 columns" style="text-align: center;"> 
<a href="energy.html"><img src="metro_tiles/account.png"></a> 
</div> 

<div class="large-3 columns" style="text-align: center;"> 
<a href="about.html"><img src="metro_tiles/about.png"></a> 
</div> 

</div> 

사람 사이의 패딩을 만들 수있는 정직하고 방법을 지적 할 수 타일의 열 은 행 사이의 패딩과 동일합니까? 파운데이션을위한 CSS 파일은 매우 크고 새로 온 사람들을 협박합니다.

Answer 1

CSS에서 여전히 배경 이미지를 사용할 수 있으므로 기본 Zurb CSS 파일에 대해 걱정할 필요가 없습니다.

CSS 파일을 만들어 CSS 파일 폴더에 저장하고 app.css라는 이름으로 저장하십시오. 이제 당신이 규칙을 만들면 여기에서 구할 수 있습니다.

예를 들어 "main-box"규칙을 숫자 값으로 만들고 CSS 파일에 저장할 수 있습니다. 그런 다음 배경 이미지를 적용 할 수 있습니다. 그래서 HTML은 다음과 같을 것이다 :

<div class="row"> 

<div class="main-box large-3 columns" style="text-align: center;"> 
<a href="trash.html"><img src="metro_tiles/trash.png"></a> 
</div> 

<div class="main-box2 large-3 columns" style="text-align: center;"> 
<a href="water.html"><img src="metro_tiles/water.png"></a> 
</div> 

<div class="main-box3 large-3 columns" style="text-align: center;"> 
<a href="energy.html"><img src="metro_tiles/account.png"></a> 
</div> 

<div class="main-box4 large-3 columns" style="text-align: center;"> 
<a href="about.html"><img src="metro_tiles/about.png"></a> 
</div> 

</div> 

그리고 단순히이 같은 app.css의 배경 이미지와 CSS 규칙 제공 :

.main-box,.main-box2,.main-box3,.main-box4 {background-image: url(path to your image file here);} 

또는 별도의 별도의 배경 이미지를 가질 필요가있는 경우 같은 규칙 : 등등

.main-box{background-image:url();} 
.main-box2{} 
.main-box3{} 
.main-box4{} 

및 ...

내가주의해야한다

이 단지입니다 그것을하는 한 가지 방법. 반응 형 디자인에는 html로 이미지를 입력하는 데 많은 시간이 소요됩니다. 배경 이미지 사용은 기본 컨테이너 패딩을 재정의하는 한 가지 방법 일뿐입니다.

다른 한 부가 메모 .... Zurbs CSS 파일의 기본 CSS 규칙 중 하나를 app.css에 입력하면 그러면 재정의됩니다. 따라서 원본 파일을 엉망으로 만들지 않고도 기본 CSS 값을 변경할 수 있습니다.

Answer 2

열 사이의 여백/거터를 제거하는 가장 간단한 방법은 행에 collapse 클래스를 사용하는 것입니다. 제어를 원하는 경우 다음을 읽어보십시오.

Sass/Compass, zurb-foundation gem 또는 맞춤형 다운로드를 사용하는 경우 몇 가지 추가 옵션이 있습니다. 예를 들어 전체 앱에서 열 간격을 변경하려는 경우 $column-gutter 변수 만 설정할 수 있습니다. 이와 같이 고정 간격을 갖는 요소 그룹의 경우 블록 격자를 고려할 수도 있습니다.

사용자 정의 여백을 특정 행에만 적용하려면 새 클래스를 정의하고 행에 대해 .feature-tiles을 지정하고 열을 사용자 정의 할 수 있습니다.예를 들어 :

는

@import 'foundation'; 

.feature-tiles { 
    $row-width: em-calc(800); 
    @include grid-row; 

    .columns, .column { 
    $column-gutter: 0; 
    @include grid-column; 
    } 
} 

이 예는, 당신이 (오히려 row 이상) 행에 사용할 수있는 클래스를 설정하는 전체 행 폭을 설정하고, 아늑한 타일 레이아웃에 적절한 열 사이의 도랑을 제거합니다. 행에서 네 개의 타일을 얻으려면 이전과 동일하게 각 타일에 large-3 columns을 사용합니다. em-calc 조각은 페이지의 기본 글꼴 크기를 기준으로 제공된 픽셀 값에서 크기를 계산하는 도우미 일뿐입니다. 이를 통해 장치간에 상대적 크기를 유지할 수 있습니다. 그래서 img 태그는 아마 적절한, 나는 이미지가 배경보다 더 많은 콘텐츠 것을 제안, http://foundation.zurb.com/docs/components/grid.html

위의 예에서 :

그리드에 대한 문서 페이지에 자세한 설명합니다. 다음은 더 많은 옵션을 설명하는 독설 기사입니다. http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/