fondazione zurb è possibile avere una larghezza di riga completa

Question

Utilizzo la fondazione 3 per creare un sito Web reattivo ma voglio che la larghezza dello sfondo di piè di pagina e di navigazione occupi l'intera larghezza? Ho chiamato le mie righe come

class="row navigation" 
class="row footer" 

Ho provato a cercare come risolvere questo problema ma ho esaurito le opzioni. Presumo che si tratti di una piccola correzione nel file foundation.css, ma al momento è un po 'troppo travolgente perché sono nuovo.

Qualsiasi pozzo molto apprezzato.

Answer 1

Sono completamente in disaccordo con la risposta. Non si dovrebbe avere da usare! Importante

fare riferimento al mio articolo e demo http://edcharbeneau.github.com/FoundationSinglePageRWD/

Si dovrebbe essere in grado di ottenere quello che ti serve da lì. La demo è per 2.2 ma è molto simile in funzione alla v3.

Answer 2

Se si utilizza Zurb Foundation Framework, rimuovere semplicemente la classe row e avvolgere l'elemento in una classe container di larghezza pari al 100%. Ora probabilmente si desidera centrare la roba, utilizzare la classe centered come questo:

<div class="container navigation"> 
    <div class="centered"> 
     Some navigation stuff 
    </div> 
</div> 

Answer 3

Ho incontrato lo stesso problema di ieri. Il trucco è, per i blocchi di spanning a tutta larghezza, tenerli semplicemente fuori dalla struttura riga/colonna, poiché riga/colonna applicherà sempre il riempimento predefinito. Tieni da solo i piedi e le intestazioni e usa la riga/colonna al loro interno.

<header> 
    This will span the full width of the page 
</header> 
<div class="row"> 
    <div class="twelve columns"> 
     This text will flow within all typical padding and margins 
    </div> 
</div> 
<footer> 
    This will span the full width of the page 
    <div class="row"> 
     <div class="twelve columns"> 
      This text will flow within all typical padding and margins 
     </div> 
    </div> 
</footer> 

Answer 4

Io non sono sicuro se mi manca qualcosa, ma ho dovuto aggiungere un div .row per il .centered al lavoro. Posso ancora dare uno stile allo .header in questo caso, ma il metodo .container non ha funzionato per me.

<header class="header"> 
    <div class="row"> 
    <div class="centered"> 
     Logo and stuff 
    </div> 
    </div> 

    <div class="row"> 
    Some navigation stuff 
    </div> 
</header> 

Answer 5

Se non si dà la classe "riga" e metti le colonne al suo interno lavora su una larghezza di 100%

Answer 6

davvero si vuole mantenere la classe di fila altrimenti si perde un sacco di potenza del sistema di rete. Perché non modificare l'impostazione per $ rowWidth da 1000 (impostazione predefinita) a 100%. Questo può essere trovato nel file foundation_and_overrides.scss

Answer 7

Quello che ho fatto è stato aggiungere una classe personalizzata in modo da poterla concatenare con .row e sovrascrivere l'impostazione della larghezza massima.

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

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

ho messo in larghezza anche qui per coprire le basi, ma è già dichiarato in foundation.css così puoi semplicemente omettere.

Answer 8

Usa "Sezione" come in:

<section> 
    <div class="row"> 
    <div class="small-12 columns"> 
    </div> 
    </div> 
</section> 

Quindi, assegnare un ID per la sezione e l'uso che per lo sfondo.

Answer 9

sì, basta usare in questo modo:

<div class="large-12 columns"> 

    <h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2> 

    </div> 

Answer 10

Basta sostituire la proprietà max-width come max-width: initial;, per esempio,

.fullWidth { 
     width: 100%; 
     margin-left: auto; 
     margin-right: auto; 
     max-width: initial; 
    } 

<div class="row fullWidth"> </div> 

questo funziona per me :)

Answer 11

So che ci sono già molte risposte, ma penso di avere qualcosa di nuovo da aggiungere in questo argomento se qualcuno sta usando Foundation 5 e incappato in questa domanda (come me).

Poiché Foundation utilizza le unità REM, sarebbe meglio modificare la classe .row e utilizzarle e aggiungendo classe extra, in modo da avere solo righe selezionate a larghezza intera. Ad esempio utilizzando .full classe:

.row.full { 
    max-width: 80rem; /* about 90rem should give you almost full screen width */ 
} 

Si può vedere che è usato in questo modo, anche in pagina di documentazione di ZURB Foundation (hanno modificato .row di classe, però): http://foundation.zurb.com/docs/ (basta guardare in codice sorgente della pagina)

Answer 12

Basta impostare il

$row-width: 100%; 

http://foundation.zurb.com/forum/posts/927-full-width-layouts

Answer 13

Questo è per quanto riguarda Foundation 5. Nessuna delle risposte fornite finora fornisce ampiezze da bordo a bordo. Questo perché interno .columns aggiungere padding.

Per un vero contenuto da tutta la larghezza, aggiungilo al tuo CSS.

.row.full { width: 100%; max-width: 100%; } 
.row.full>.column:first-child, 
.row.full>.columns:first-child { padding-left: 0; } 
.row.full>.column:last-child, 
.row.full>.columns:last-child { padding-right: 0; } 

Basta aggiungere .full classe per un .row si desidera estendere larghezza.

<div class="row full"> 
    <div class="medium-6 column">This column touches Left edge.</div> 
    <div class="medium-6 column">This column touches Right edge.</div> 
</div> 

Answer 14

Se stai usando sass, questo è un modo migliore:

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

.row{ 
    &.full-width{ 
     width: 100%; 
     max-width: 100%!important; //might be needded depending on your settings 
     &>.column:first-child, 
     &>.columns:first-child{ 
      padding-left: 0; 
     } 
     &>.column:last-child, 
     &>.columns:last-child{ 
      padding-right: 0; 
     } 
    } 
} 

Answer 15

Fondazione 6 supporta questa funzione naturalmente con row expanded. esempio di codice:

<div class="expanded row"> 
    ... 
</div> 

Read more here: http://foundation.zurb.com/sites/docs/grid.html#fluid-row