如何在框架框架中向容器添加填充

Question

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

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

Answer 1

如果我正确理解您的帖子，请在此处找到我的解决方案。

由于这是白色背景，我希望在盒子内有一些填充。 很简单：我在父级内部添加了一个并设置了样式 适当地使用填充：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 的填充。通过将列正确嵌套在容器中，您可以获得一致的填充。

一种解决方案是使用偏移量类，该类在左侧为您提供 60px 的填充。

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

Answer 3

您需要

编辑框架.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 */
}

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

Answer 4

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

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

其中内容类的左边距：10px;

Answer 5

如果对

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

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

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

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

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