如何在Skeleton Framework中将填充添加到容器？

Question

我正在使用框架框架(http://getskeleton.com)，我想要一个具有背景颜色和白色容器页面的页面。

如果我添加了.container {padding:0 10px;}，当我为小型设备调整窗口大小时，布局会中断。希望我在这里遗漏了一些非常明显的东西。如何在不破坏响应式设计的情况下向容器添加填充？

Answer 1

如果我没看错的话，我的解决方案是找到了here。

因为这有一个白色的背景，我想要一些填充到盒子里。非常简单:我在父元素中添加了一个元素，并使用填充: 10px和白色背景对其进行了适当的设置。

CSS

div.inner {
    padding: 4px 4px 8px 12px;
    overflow:auto;
}

HTML

<div id="what_you_think" class="realm eight columns alpha"> 
    <div class="inner">
        <h3>You are <font style="color:black;">not</font>...</h3>

    </div>
</div>

结果

http://home.grandecom.net/~scottmorse/

Answer 2

这对于骨架来说是不幸的。

请注意，您的.container.column和.container.columns类都有10px的填充。通过正确地将列嵌套在容器中，您可以获得一致的填充。

一种解决方案是使用offset-by-one类，它为您提供了60px的左侧填充。

最后，您可以修改skeleton.css中的核心类，向每个元素添加所需的填充并缩小它们的宽度。

Answer 3

对于较小的媒体查询，您需要编辑skeleton.css (或使用您自己的样式表覆盖它)。

注释掉删除填充的规则，并将.container .one.column (等等)规则减少20px。这将给你留下正确的大小和一个很好的10px的两边空白。:)

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
    .container { width: 300px; }

    /* removed to maintain margins
    .container .columns,
    .container .column { margin: 0; } */

    .container .one.column,
    .container .one.columns,
    .container .two.columns,
    .container .three.columns,
    .container .four.columns,
    .container .five.columns,
    .container .six.columns,
    .container .seven.columns,
    .container .eight.columns,
    .container .nine.columns,
    .container .ten.columns,
    .container .eleven.columns,
    .container .twelve.columns,
    .container .thirteen.columns,
    .container .fourteen.columns,
    .container .fifteen.columns,
    .container .sixteen.columns,
    .container .one-third.column,
    .container .two-thirds.column  { width: 280px; } /* this was reduced by 20px */
}

另外，我需要为device width 601px for Nexus 7编写一个解决方案。