2

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

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

4

5 回答 5

2

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

由于它有一个白色背景，我想在盒子里放一些填充物。很简单：我在父级内部添加了一个，并使用填充适当地设置了样式：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/

于 2013-04-25T22:53:37.733 回答
0

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

注释掉删除填充的规则，并将 .container .one.column（等等）规则减少 20px。这将为您提供正确的大小和两侧的 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 */
}

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

于 2013-01-14T17:28:00.843 回答
0

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

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

其中内容类有 margin-left:10px;

于 2013-03-25T18:38:22.167 回答
0

这对骷髅来说是不幸的。

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

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

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

于 2013-01-12T14:40:14.657 回答
0

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

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

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

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

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

于 2014-09-05T22:56:22.193 回答