zumb foundation ist es möglich, volle Zeilenbreite zu haben

Question

Ich benutze Foundation 3, um eine responsive Website zu erstellen, aber ich möchte die Footer und Navigation Hintergrundbreite haben, um die gesamte Breite zu besetzen? Ich habe meine Zeilen als

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

benannt Ich habe versucht, wie das zu beheben, aber ich habe keine Optionen. Ich gehe davon aus, dass es sich um eine kleine Korrektur in der Datei foundation.css handelt, aber im Moment ist es ein bisschen zu überwältigend, da ich neu bin.

Alle Poiinters sehr geschätzt.

Answer 1

Ich stimme überhaupt nicht mit der Antwort. Sie sollten nicht verwenden müssen! Important

Bitte lesen Sie meinen Artikel und Demo auf http://edcharbeneau.github.com/FoundationSinglePageRWD/

sollten Sie in der Lage sein, zu bekommen, was Sie von dort brauchen. Die Demo ist für 2.2, ist aber sehr ähnlich wie v3.

Answer 2

Wenn Sie das Zurb Foundation Framework verwenden, entfernen Sie einfach die row Klasse und wickeln Sie das Element in eine Klasse container mit einer Breite von 100%. Jetzt wollen Sie wahrscheinlich das Zeug zum Zentrum, verwenden Klasse centered wie folgt aus:

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

Answer 3

ich in das gleiche Problem lief gestern. Der Trick besteht darin, dass Sie für übergreifende Blöcke mit voller Breite nur die Zeilen-/Spaltenstruktur außer Acht lassen, da in Zeile/Spalte immer die Standardauffüllung angewendet wird. Behalten Sie Ihre Fußzeilen und Header auf eigene Faust und verwenden Sie die Zeile/Spalte in ihnen.

<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

Ich bin nicht sicher, ob ich etwas fehlt, aber ich hatte ein .row div für die .centered arbeiten hinzuzufügen. Ich kann immer noch die .header stylen, um in diesem Fall eine volle Breite Hintergrund zu haben, aber die .container Methode hat nicht für mich funktioniert.

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

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

Answer 5

Wenn Sie es nicht die „Reihe“ Klasse geben und Spalten setzen im Inneren auf einer Breite von 100% arbeitet

Answer 6

Sie wirklich wollen, würde die Zeile Klasse zu halten, sonst verlieren Sie eine Menge der Leistung des Grid-Systems. Warum ändern Sie nicht die Einstellung für $ rowWidth von 1000 (Standard) auf 100%. Dies kann in der Datei foundation_and_overrides.scss gefunden werden.

Answer 7

Was ich getan habe, ist eine benutzerdefinierte Klasse hinzufügen, so dass ich es mit .row ketten und überschreiben kann die maximale Breite Einstellung.

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

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

Ich habe Breite in hier zu Basen zu bedecken, aber es ist bereits in foundation.css erklärt, so dass Sie es einfach weglassen.

Answer 8

Use "Abschnitt", wie in:

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

Dann eine ID zu dem Abschnitt zuweisen und dass für Ihren Hintergrund verwenden.

Answer 9

ja, genau wie diese verwenden:

<div class="large-12 columns"> 

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

    </div> 

Answer 10

einfach überschreiben die max-width Eigenschaft als max-width: initial; zum Beispiel

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

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

dies funktioniert für mich :)

Answer 11

Ich weiß, dass es bereits viele Antworten gibt, aber ich denke, ich habe etwas Neues in diesem Thema hinzuzufügen, wenn jemand Foundation 5 verwendet und stolperte über diese Frage (wie ich).

Da Foundation REM-Einheiten verwendet, wäre es am besten, die Klasse .row zu ändern, indem Sie sie verwenden und zusätzliche Klassen hinzufügen, sodass Sie nur Zeilen mit voller Breite auswählen können. Zum Beispiel durch .full-Klasse:

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

können Sie sehen, dass es so verwendet wird, auch in der Dokumentation Seite von ZURB Foundation (sie verändert .row Klasse, obwohl): http://foundation.zurb.com/docs/ (nur Seite Quellcode schauen in)

Answer 12

Stellen Sie einfach die

$row-width: 100%; 

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

Answer 13

Dies in Bezug auf die Stiftung 5. Keine der Antworten, die bisher gegeben wurden, liefern Kante an Kante, volle Breite. Das liegt daran, dass das innere .columns Padding hinzufügt.

Für einen echten Edge-to-Edge-Content mit voller Breite fügen Sie diesen zu Ihrem CSS hinzu.

.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; } 

Fügen Sie einfach .full Klasse zu einem .row Sie wollen volle Breite erweitern.

<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

Wenn Sie sass verwenden, ist dies ein besserer Weg:

<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

6 Foundation diese Funktion natürlich mit row expanded unterstützt. Codebeispiel:

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

Lesen Sie mehr hier: http://foundation.zurb.com/sites/docs/grid.html#fluid-row