Question

我正在使用Foundation 4来为发票页面添加网格。这是我的代码：

<div class="row grid">
    <div class="large-6 columns">
        <span>Ship To</span>
    </div>
    <div class="large-6 columns">
        <span>Order Information</span>
    </div>
</div>
<div class="row">
    <div class="large-6 columns">
        <span>Content Of ShipTo</span>
    </div>
    <div class="large-6 columns">
        <span>Content Of Order Information</span>
    </div>
</div>

它显示为一个包含两行的两列表。

然而，当我缩小窗口时，我看到两个标题一起上下移动。我希望第二列的第一个单元格显示在第一列的第一个单元格下面。如何更改代码？也许巢网可以工作，但我仍然希望听到你们的意见。

img1 http://img6.imageshack.us/img6/6188/lpk.png

目前这种狭隘的效果显示出来，这不是我想要的。 img2 http://img96.imageshack.us/img96/1217/pvb.png

Answer 1

您应该将标记更改为包含其关联内容的标题组。而不是你有什么，尝试这样的事情：

<div class="large-6 small-12 columns">
    <div>
        <span>Ship To</span>
    </div>
    <div>
        <span>Order Information</span>
    </div>
</div>
<div class="large-6 small-12 columns">
    <div>
        <span>Content Of ShipTo</span>
    </div>
    <div>
        <span>Content Of Order Information</span>
    </div>
</div>

这将使它们堆叠在小视口中并且并排放在较大的视口中。

如何配置基础4中的网格组

1 个答案: