Question

使用row时遇到了一些麻烦。我有这个：

<div class="row">
    <div class="large-2 medium-12 small-12 columns">
      <div class="callout">
        <p>
          Lorem Ipsum
        </p>
      </div>
    </div>
    <div class="large-8 medium-12 small-12  columns">
      <div class="callout">
        <p>
          Lorem Ipsum
        </p>
      </div>
    </div>
    <div class="large-2 medium-12 small-12 columns">
      <div class="callout">
        <p>
          Lorem Ipsum
        </p>
      </div>
    </div>
</div>

但我让每个 Lorem ipsum 都在彼此之下，而不是在旁边。我该如何解决这个问题？

Answer 1

我怀疑你可能一直在使用适合遗产＆＃39;浮动＆＃39;或者＆＃39; flex＆＃39;网格系统虽然基础6的默认启用是＆＃39; XY网格＆＃39;。因此，标记不同，会导致列堆叠。

浮动/弹性网格标记

<div class="row">
  <div class="large-2 medium-12 small-12 columns">
    <div class="callout">
      <p>
        Lorem Ipsum
      </p>
    </div>
  </div>
  <div class="large-8 medium-12 small-12  columns">
    <div class="callout">
      <p>
        Lorem Ipsum
      </p>
    </div>
  </div>
  <div class="large-2 medium-12 small-12 columns">
    <div class="callout">
      <p>
        Lorem Ipsum
      </p>
    </div>
  </div>
</div>

您可以继续使用＆＃39; float＆＃39;或者＆＃39; flex＆＃39;网格但需要指定您在项目中使用的内容。或者，如果您想使用较新的“XY网格”，您可以像这样修改标记。

XY网格标记

<div class="grid-x grid-margin-x">
  <div class="cell large-2 medium-12 small-12">
    <div class="callout">
      <p>
        Lorem Ipsum
      </p>
    </div>
  </div>
  <div class="cell large-8 medium-12 small-12">
    <div class="callout">
      <p>
        Lorem Ipsum
      </p>
    </div>
  </div>
  <div class="cell large-2 medium-12 small-12">
    <div class="callout">
      <p>
        Lorem Ipsum
      </p>
    </div>
  </div>
</div>

使用Foundation的“行”的正确方法

1 个答案: