Fundament 6: Volle Breite in geschachtelter Zeilenspalte - zurb-foundation

Im Moment benutze ich Foundation 6.3.1 und bleibe bei der Überschreibung der Schachtelungsspalte auf die volle Containerbreite.

Hier ist, was ich versuche zu tun:

<div class="row container">
<div class="column small-8">
<div class="row">
<div class="column standard">
Standard content
</div>
</div>
<div class="row expanded">
<div class="column full">
Full screen width content
</div>
</div>
<div class="row">
<div class="column standard">
Standard content
</div>
</div>
</div>
</div>

https://codepen.io/maca1016/pen/QgobrJ

Ich benötige den Bereich "Full screen width content", der auf die volle Breite des Browserfensters erweitert wird. Wenn möglich, möchte ich dies durch den Rahmen erreichen. Eher nicht verwenden position: absolute; zur Lösung.

Antworten:

0 für die Antwort № 1

Ich denke, Sie müssen die Container "s übersteuern width Deklaration für diesen Abschnitt, und zwingen Sie den Inhalt größer als sein Container. Ich erzwang es mit einem Inline-Stil und es funktionierte in den Stift, aber Sie möchten es aufräumen und fügen Sie ein class dafür oder ein ID wenn es nur ein einmaliger Gebrauch ist.

<div class="row expanded">
<div style="width:150%!important;" class="column full">
Full screen width content
</div>
</div>

https://codepen.io/anon/pen/JJzJQv


0 für die Antwort № 2

Gibt es dafür einen besonderen Grund? .row.container alles einpacken?, ich denke, die Lösung nimmt eindeutig die Elemente, die Sie benötigen, volle Breite (die .row.expanded und seine Kinder) aus diesem Container, ohne etwas anderes hinzuzufügen.

Hoffe das hilft.


Verwandte Fragen