css骨架框架让所有列都适合在同一行

Question

我正在尝试使用骨架框架，但我感到很困惑。这是我尝试使用的代码:

http://pastebin.com/ZcEAed0D

我什至尝试在列的开头和结尾添加 alpha 和 omega。但是我剩下的看起来像这样:

http://imgur.com/En3QLA5

您看到第 16 列悬在末尾。它不应该能够在一行中容纳 16 列的内容吗？

如果我尝试其他组合，如十四和二等，就会发生这种情况。它卡在页面末尾。

我哪里错了？

列之间的宽度也可以调整吗？如果可以的话如何调整？关于如何使用所有骨架功能的任何好的教程？您是否仅通过用完另外 16 列来创建新的网格线？

谢谢。

Answer 1

由于您为每个列 div 添加了 1px 的边框，因此每个列容器都比应有的宽度宽了 1px。默认情况下，边框会扩展容器的宽度。要解决此问题，您必须将以下 CSS 属性添加到您的“div”选择器中，这会将边框包含在容器宽度计算中。

box-sizing: border-box;

有关盒子大小的更多信息:http://css-tricks.com/box-sizing/