Twitter Bootstrap框架支持padding吗？

Question

我对Twitter Bootstrap框架的理解有些困难，它是否允许在容器周围添加基本的内边距？

似乎默认有20像素的左外边距，但没有内边距。这里有人解决了这个问题吗？

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

如果您的背景是白色，那么这将运行良好，但是一旦我在容器后面放置颜色，我就得不到填充，如果我添加填充，布局就会破裂。 我做错了什么吗？

- Amit Erandole

Answer 1

将上述方法应用于填充也同样有效。将一个名为.is-padded的类添加到您想要填充的span中（在这种情况下是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 （或 less）通过应用填充减少 span 的宽度，例如：

/* 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

响应式网格系统中的断点可以使用媒体查询轻松地进行覆盖。然而，在流体网格中，这种方法是行不通的。

- Ben Edge

Answer 2

受 stackoverflow.com/a/10779289启发

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

- Zombo

Answer 3

您可以在.less文件中覆盖sitewidth属性。 // 网格系统和页面结构

例如，如果您想在默认的gridGutterWidth为20px的情况下每侧都增加20px，则取消以下注释： @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); 并替换为： @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns + 1)); 同时使用css规则取消margin-left:-20px： .row {margin-left: 0;} 但是，如果您使用嵌套行，则需要为要缩进的行添加一个类。创建以下规则： .indent {margin-left: 0;} 然后在

中添加一个类

。

- alius