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;
}