Per impostazione predefinita, le righe di Zurb Foundation 4 e 5 funzionano a una larghezza massima di 1000 px, anche su monitor molto grandi, creando margini su entrambi i lati del contenuto. Come posso farlo girare a schermo intero senza influenzare la reattività del design?Come si creano righe in Zurb Foundation 4/5 a schermo intero?
Aggiungere il seguente codice al file CSS:
Non mi piace perché rende l'intera pagina al 100%. Vedi il mio esempio qui sotto se solo stavi cercando di realizzare un piè di pagina o un'intestazione al 100%. – Tom
Beh, sì, ovviamente; ma questa non è la domanda originale La tua è una risposta perfettamente valida alla domanda che poni nei commenti. – BFWebAdmin
@BFDatabaseAdmin using! Important è un buon modo per rovinare i fogli di stile. Qualsiasi .row.narrow non sarà in grado di impostare la larghezza minima: 50% perché qualcuno su un thread di commento StackOverflow ha una risposta accettata che dice che lo stile base .row dovrebbe avere un tag! Important per sovrascrivere la larghezza minima predefinita sulla riga ... – Lotus
Se si utilizza Sass/bussola, il zurb-foundation gemma, o una distribuzione Fondazione personalizzato, è possibile impostare la variabile $row-width. Questo scorrerà da qualunque altra parte sia usato. È inoltre possibile regolare, ad esempio, il numero di colonne, la larghezza della larghezza di grana e così via.
La parte inferiore della documentazione griglia spiega di più: http://foundation.zurb.com/docs/components/grid.html
Penso che il modo migliore per farlo è come questo.
Aggiungere questo nella vostra CSS o un costume CSS-
.row.full-width {
width: 100%;
max-width: 100%;
}
Poi nel tuo html, fare questo-
<div class="row full-width"> </div>
Questo vi permetterà di mantenere il sistema di griglia in tatto in caso vuoi solo utilizzare a schermo intero un'intestazione o un piè di pagina.
<div class="row">
<div class="large-6 columns"></div>
<div class="large-6 columns"></div>
</div>
questo darà una larghezza di 1000px
<div class="large-6 columns"></div>
<div class="large-6 columns"></div>
, ma se si utilizza la classe di colonna, senza la classe di righe che l'otterrete fullscreen ...
La mancata aggiunta di righe perde la struttura fondamentale di Zurb basata sulla griglia. – BFWebAdmin
La risposta accettata me è cominciato, ma Ho dovuto usare questo: body, html, .row {margin: 0px; larghezza: 100%! importante; larghezza minima: 100%! importante; } –