/ / Drucken Sie zwei Spalten in CSS mit Zurb Foundation 4 - CSS, Druck, Sass, Zurb-Stiftung

Drucken Sie zwei Spalten in CSS mit Zurb Foundation 4 - CSS, Druck, Sass, Zurb-Stiftung

Mein Code sieht so aus:

<link rel="stylesheet" href="css/foundation.css" media="all">
<div class="row">
<div class="large-12 columns">
<div class="large-6 column">
Lorem ipsum
</div>
<div class="large-6 column">
Lorem ipsum
</div>
</div>
</div>

im Browser sieht es aus wie es sein soll Browser

Aber wenn ich es drucken möchte - es verhält sich wie Mobile / Tablet-Ansicht Bildbeschreibung hier eingeben

Ich brauche genau zwei sichtbare Spalten auf einer DIN-A4-Seite sowie im Browser. Gibt es einen Weg, damit umzugehen? Oder sogar ein besserer Rahmen als Zurb.Foundation 4 für dieses Problem?

Freundliche Grüße.

Antworten:

0 für die Antwort № 1

Für Handys sollten Sie Klassen hinzufügen small-12 zu dem Container (d. h. wo Sie haben large-12) und small-6 wo du hast large-6. Für den Druck empfehle ich, z. eine Gewohnheit print-6 Klasse, die 50% Breite hat und entsprechend schwebt.


-1 für die Antwort № 2

Wenn Sie jemals dieses Problem haben. Versuchen Sie Bootstrap, da es in Foundation noch keine echte Lösung gibt. Wenigstens habe ich keinen gefunden.

Bootstrap:

<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
Lorem ipsum
</div>
<div class="col-6 col-sm-6 col-lg-6">
Lorem ipsum
</div>
</div>