基础网格不工作。 3列布局？答案

【问题标题】：Foundation Grid Not Working. 3 Columns Layout?基础网格不工作。 3列布局？
【发布时间】：2013-08-10 04:05:59
【问题描述】：

我用过 Foundation 很多次，一切正常。我正在尝试在页脚正上方做三列，它似乎太大了：http://1stcallwebdesign.com/tracsoft/

<div class="row">
    <div class="twelve columns"> 
        <div class="four columns">
            <h2>Our Clients</h2>

        </div> 
        <div class="four columns">
            <h2>Blog</h2>

        </div> 
        <div class="four columns last">
            <h2>Expertise</h2>

        </div> 
    </div>
</div>

应该是 3 个完美的列。 4x3=12。但是柱子似乎太大了，把最后一个推下来了。有什么想法吗？

编辑：页脚中发生了同样的事情。四列，最后一列被推。我知道我可以减少列的宽度，但这会弄乱整个网格。它应该可以工作。

【问题讨论】：

啊啊啊，我已经修好了！我只需要制作列：border-box

标签： html css zurb-foundation

【解决方案1】：

使用您的代码：

.four, .row .four {
width: 30.33333%;
}

缩小宽度。那么你的问题就会解决...

【讨论】：

感谢您的回复。我知道我可以减小宽度，但是当我调整窗口大小时，这会影响响应。

【解决方案2】：

请查看http://1stcallwebdesign.com/tracsoft/css/global.css

.column, .columns {
    float: left;
    min-height: 1px;
   /* padding: 0 15px;*/ /*this will do*/
    position: relative;
}

或者你可以这样做

.four, .row .four {
    width: 30.333%;
}

【讨论】：