如何在 Skeleton Framework 中为容器添加填充？答案

【问题标题】：How can I add padding to the container in the Skeleton Framework?如何在 Skeleton Framework 中为容器添加填充？
【发布时间】：2012-12-05 21:03:45
【问题描述】：

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

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

【问题讨论】：

标签： css responsive-design skeleton-css-boilerplate

【解决方案1】：

这对骷髅来说是不幸的。

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

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

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

【讨论】：

【解决方案2】：

您需要为较小的媒体查询编辑骨架.css（或使用您自己的样式表覆盖它）。

注释掉删除填充的规则，并将 .container .one.column（等等）规则减少 20 像素。这将为您提供正确的大小和两侧的 10 像素边距。 :)

    /* 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 */
}

顺便说一句，我需要为设备宽度写一个解决方案601px for Nexus 7。

【讨论】：

【解决方案3】：

我可能误解了您的问题，但您是否尝试过添加边距而不是填充例如。

      <div class="two-thirds column">
          <div class="content">
              Your text etc here
          </div>
      </div>

内容类的margin-left:10px；

【讨论】：

【解决方案4】：

如果我正确理解您的帖子，我的解决方案是 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/

【讨论】：

【解决方案5】：

如果您对要添加填充的任何 DIV 使用 box-sizing，则可以添加填充。这将在考虑填充的情况下计算 div 的宽度。

.someElementInSkeletonGrid {
    box-sizing: border-box;
}

我已经能够通过使用它成功地将填充添加到骨架 DIV 中。浏览器支持也不错。

阅读更多： http://css-tricks.com/box-sizing/

浏览器支持： http://caniuse.com/#feat=css3-boxsizing

【讨论】：