Question

我正在使用Skeleton Framework（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（和so-on）规则减少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 */
}

另外，我需要为设备宽度601px for Nexus 7编写解决方案。

Answer 4

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

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

内容类有margin-left：10px;

Answer 5

如果您使用框大小调整到要添加填充的DIV，则可以添加填充。这将考虑填充来计算div的宽度。

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

我已经能够通过使用它成功地向Skeleton DIV添加填充。浏览器支持也很不错。

了解更多： http://css-tricks.com/box-sizing/

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

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

5 个答案:

CSS

HTML

结果