twitter-bootstrap - Twitter Bootstrap 框架是否支持填充？

Question

我无法理解 Twittter Bootstrap 框架。它是否允许在容器周围进行基本填充？

似乎有一个默认的 20px 边距，但没有填充。这里有人设法解决了这个问题吗？

http://twitter.github.com/bootstrap/

如果您的背景是白色的，这很好用，但是当我在容器后面放置颜色时，我没有填充，如果我添加填充，我的布局就会中断。难道我做错了什么？

Answer 1

采用上述方法并将其应用于填充也可以。

将一个名为 .is-padded 的类添加到要填充的跨度（在本例中为 span4）

<!-- Example row of columns -->
  <div class="row">
    <div class="span4 is-padded">
      <h2>Heading</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div>

然后创建通过应用填充来减小跨度宽度的 CSS（或更少），例如：

/* CSS example */
.span4.is-padded {
    width: 280px; /* 300 - (10x2) */
    padding: 10px;
    background: #CCC; /* just so you can see it */
}

/* Less example */
.span4.is-padded {
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth;
    padding: @gridGutterWidth/2;
    background: #CCC; /* just so you can see it */
}

这可以很容易地在网格的其余部分重复

.is-padded {
    padding: @gridGutterWidth/2;
    background: #CCC; /* just so you can see it */
}
.span1.is-padded {
    width: (@gridColumnWidth * 1) + (@gridGutterWidth * 0) - @gridGutterWidth;
}
.span2.is-padded {
    width: (@gridColumnWidth * 2) + (@gridGutterWidth * 1) - @gridGutterWidth;
}
.span3.is-padded {
    width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - @gridGutterWidth;
}
.span4.is-padded {
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth;
}
... etc

响应式网格中的断点也可以使用媒体查询轻松覆盖。

但是，这种方法不适用于流体网格。

Answer 2

灵感来自stackoverflow.com/a/10779289

.light {
  -moz-box-sizing: border-box;
  background: url(/img/background.png);
  padding: 1em;
}

Answer 3

您可以覆盖 .less 文件中的站点宽度 // 网格系统和页面结构

即如果你想在 940px 的每一边添加 20px（20px 是默认的 gridGutterWidth）注释掉：

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

和写：

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1) + (@gridGutterWidth * 2));

使用css规则取消margin-left：-20px：

.row {margin-left: 0;}

但是，如果您使用嵌套行，则需要将一个类添加到您想要缩进的行中。创建规则：

.indent {margin-left: 0;}

然后<div class="row">在一个类中添加 <div class="row indent">