/ / Verhindern Sie Spalten mit Text aus dem Umbruch in der Foundation App - zurb-foundation

Verhindern Sie, dass Spalten mit dem Text in Foundation App eingebettet werden - zurb-foundation

Ich habe 3 Spalten, die ich Seite an Seite halten möchte. Sie arbeiten wie erwartet mit einem kurzen Titel. Sobald ich jedoch Text in die Spalten eingefügt habe, werden sie stattdessen pro Zeile angezeigt. Wie erzwinge ich den Text zu umbrechen, so dass die Spalten Seite-an-Seite bleiben?

<div class="grid-block align-center">

<div class="grid-content">
<p class="text-center">
Less Stress
</p>
<p class="text-center">
Some very long text here.
</p>
</div>

<div class="grid-content">
<p class="text-center">
Less Work
</p>
<p class="text-center">
Some very long text here.
</p>
</div>

<div class="grid-content">
<p class="text-center">
More Profit
</p>
<p class="text-center">
Some very long text here.
</p>
</div>
</div>

Antworten:

0 für die Antwort № 1

Obwohl das neue Foundation-App-Framework verwendetFlexbox, es hat immer noch eine Hilfsklasse mit der bekannteren "Medium-X" -Nomenklatur. Daher funktioniert der folgende Code basierend auf einem 12-Spalten-Raster, das in jede gewünschte Anzahl von Spalten geändert werden kann.

<div class="grid-block align-center">

<div class="grid-content large-4">
<h2 class="text-center">Less Stress</h2>
<p class="text-center">
Stop stressing about paperwork, monitoring xxx and xxx, tracking xxx and revenue, trying to stay on top of all operations. XXX takes all the stress away.
</p>
</div>

<div class="grid-content large-4">
<h2 class="text-center">Less Work</h2>
<p class="text-center">
Work less by getting rid of paperwork and streamlining your operations. Life"s so much easier because XXX does all the work for you.
</p>
</div>

<div class="grid-content large-4">
<h2 class="text-center">More Profit</h2>
<p class="text-center">
Save money by eliminating paper and data-entry errors, and lowering operational costs. Increase revenue with more accurate billing, faster billing cycles and more time for customers. XXX makes you more profitable.
</p>
</div>
</div>