Twitter Bootstrap 框架是否支持填充？答案

【问题标题】：Is padding supported in the Twitter Bootstrap framework?Twitter Bootstrap 框架是否支持填充？
【发布时间】：2011-12-14 15:23:40
【问题描述】：

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

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

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

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

【问题讨论】：

标签： twitter-bootstrap grid css-frameworks

【解决方案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（或更少），通过应用填充来减小 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

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

这种方法在流体网格中不起作用。

【讨论】：

【解决方案2】：

灵感来自stackoverflow.com/a/10779289

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

【讨论】：

【解决方案3】：

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

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

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

然后写：

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

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

.row {margin-left: 0;}

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

.indent {margin-left: 0;}

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

【讨论】：