防止带有文本的列在 Foundation App 中换行

Question

我想保留 3 列 side-by-side。他们按预期工作，标题很短。但是，一旦我将文本放入列中，它们就会每行一个。如何强制文本换行以使列保持 side-by-side?

<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>

Answer 1

虽然新的 Foundation App 框架使用了 Flexbox，但它仍然有一个助手 class 使用更熟悉的 'medium-x' 命名法。因此，以下代码基于 12 列网格，可以更改为所需的任意数量的列。

<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>

防止带有文本的列在 Foundation App 中换行

prevent columns with text from wrapping in Foundation App

zurb-foundation