我对Twitter Bootstrap框架的理解有些困难,它是否允许在容器周围添加基本的内边距?
似乎默认有20像素的左外边距,但没有内边距。这里有人解决了这个问题吗?
http://twitter.github.com/bootstrap/
如果您的背景是白色,那么这将运行良好,但是一旦我在容器后面放置颜色,我就得不到填充,如果我添加填充,布局就会破裂。 我做错了什么吗?
我对Twitter Bootstrap框架的理解有些困难,它是否允许在容器周围添加基本的内边距?
似乎默认有20像素的左外边距,但没有内边距。这里有人解决了这个问题吗?
http://twitter.github.com/bootstrap/
如果您的背景是白色,那么这将运行良好,但是一旦我在容器后面放置颜色,我就得不到填充,如果我添加填充,布局就会破裂。 我做错了什么吗?
<!-- 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 »</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
受 stackoverflow.com/a/10779289启发
.light {
-moz-box-sizing: border-box;
background: url(/img/background.png);
padding: 1em;
}
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
并替换为:
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns + 1));
同时使用css规则取消margin-left:-20px:
.row {margin-left: 0;}
但是,如果您使用嵌套行,则需要为要缩进的行添加一个类。创建以下规则:
.indent {margin-left: 0;}
然后在