Zurb Foundation 4/5에서 행을 전체 화면으로 만드는 방법은 무엇입니까?

기본적으로 Zurb Foundation 4 및 5의 행은 초대형 모니터에서도 최대 너비 1000px에서 실행되므로 콘텐츠 양쪽에 여백이 생깁니다. 디자인의 반응에 영향을주지 않고 전체 화면으로 실행하려면 어떻게해야합니까?Zurb Foundation 4/5에서 행을 전체 화면으로 만드는 방법은 무엇입니까?

출처

2013-07-09 BFWebAdmin

허용 대답이 날이 시작되었다하지만 나는 이것을 사용해야했다 : body, html, .row {margin : 0px; 너비 : 100 %! 중요; 최소 너비 : 100 %! 중요; } –

는 CSS 파일에 다음 코드를 추가 : 말대꾸/나침반의 zurb-foundation 보석, 또는 사용자 정의 재단 분포를 사용하는 경우, 당신은 $row-width 변수를 설정할 수 있습니다

.row {min-width:100% !important;}

출처

2013-07-09 08:47:10 BFWebAdmin

전체 페이지가 100 %가되기 때문에 나는 이것을 좋아하지 않습니다. 바닥 글이나 머리글을 100 % 만 만들려는 경우 아래의 예를 참조하십시오. – Tom

음, 분명히; 그러나 그것은 원래의 질문이 아닙니다. 귀하의 의견은 귀하가 의견에 제기 한 질문에 대한 완벽한 답변입니다. – BFWebAdmin

@BFDatabaseAdmin은! important를 사용하면 스타일 시트를 망칠 수있는 좋은 방법입니다. 모든 .row.narrow는 minover : 50 %를 설정할 수 없습니다. stackoverflow 주석 스레드의 누군가가 기본 .row 스타일에! important 태그가 있어야 기본 min-width를 무시할 수 있다는 대답을 받아 들였기 때문에 50 %를 설정할 수 없습니다 행에 ... – Lotus

. 이것은 다른 곳에서는 사용되지 않습니다. 예를 들어 기둥 수, 거터 너비 등을 조정할 수도 있습니다.

그리드 문서의 바닥은 더 설명 :

출처

2013-11-16 19:44:00 botimer

http://foundation.zurb.com/docs/components/grid.html 내가 이렇게하는 가장 좋은 방법은 다음과 같이 생각합니다.

이것은 당신이 경우에 전술에 그리드 시스템을 유지 할 수 this-

<div class="row full-width"> </div>

을, 당신의 CSS 나 HTML의 다음

.row.full-width { 
    width: 100%; 
    max-width: 100%; 
}

css- 사용자 정의로이 추가 머리글이나 바닥 글에 대해서만 전체 화면을 사용하고자합니다.

출처

2014-01-17 18:54:16 Tom

-5

<div class="row"> 
    <div class="large-6 columns"></div> 
    <div class="large-6 columns"></div> 
</div>

이 1000px

<div class="large-6 columns"></div> 
<div class="large-6 columns"></div>

의 폭을 줄 것이다 그러나 당신이 행 클래스없이 열 클래스를 사용하는 경우는 전체 화면 얻을 것이다 ...

출처

2014-08-06 13:55:49 user3914633

행을 추가하지 않으면 Zurb의 기본 그리드 기반 구조가 손실됩니다. – BFWebAdmin

Zurb Foundation 4/5에서 행을 전체 화면으로 만드는 방법은 무엇입니까?

답변

관련 문제