twitter-bootstrap 在引导程序中填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16134089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Padding In bootstrap
提问by panthro
Im using bootstrap:
我使用引导程序：
<div id="main" class="container" role="main">
<div class="row">
<div class="span6">
<h2>Welcome</h2>
<p>Hello and welcome to my website.</p>
</div>
<div class="span6">
Image Here (TODO)
</div>
</div>
Main also has a grey background. The background of the page is white. The problem I am having is that the text is right to the edge of the grey background. I want some padding but when I add it in, the image span goes to the next line.
Main 也有灰色背景。页面背景为白色。我遇到的问题是文本正好位于灰色背景的边缘。我想要一些填充但是当我添加它时，图像跨度转到下一行。
Any ideas where I'm going wrong?
任何想法我哪里出错了？
回答by Dawood Awan
I have not used Bootstrap but I worked on Zurb Foundation. On that I used to add space like this.
我没有使用过 Bootstrap，但我在 Zurb Foundation 工作过。我过去常常像这样添加空间。
<div id="main" class="container" role="main">
<div class="row">
<div class="span5 offset1">
<h2>Welcome</h2>
<p>Hello and welcome to my website.</p>
</div>
<div class="span6">
Image Here (TODO)
</div>
</div>
Visit this link: http://getbootstrap.com/2.3.2/scaffolding.htmland read the section: Offsetting columns.
访问此链接：http://getbootstrap.com/2.3.2/scaffolding.html 并阅读部分：偏移列。
I think I know what you are doing wrong. If you are applying padding to the span6like this:
我想我知道你做错了什么。如果您将填充应用于span6这样的：
<div class="span6" style="padding-left:5px;">
<h2>Welcome</h2>
<p>Hello and welcome to my website.</p>
</div>
It is wrong. What you have to do is add padding to the elements inside:
这是错误的。你需要做的是给里面的元素添加填充：
<div class="span6">
<h2 style="padding-left:5px;">Welcome</h2>
<p style="padding-left:5px;">Hello and welcome to my website.</p>
</div>
回答by David Taiaroa
The suggestion from @Dawood is good if that works for you.
如果这对您有用，@Dawood 的建议很好。
If you need more fine-tuning than that, one option is to use padding on the text elements, here's an example: http://jsfiddle.net/panchroma/FtBwe/
如果您需要更多的微调，一种选择是在文本元素上使用填充，这是一个例子：http: //jsfiddle.net/panchroma/FtBwe/
CSS
CSS
p, h2 {
padding-left:10px;
}
回答by Tom Stickel
There are padding built into various classes.
各种类都内置了填充。
For example:
例如：
A asp.net web forms app:
一个 asp.net 网络表单应用程序：
<asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />
this code above would place the Text of "Show Deleted" too close to the checkbox to what I see at nice to look at.
上面的这段代码会将“显示已删除”的文本放置在离复选框太近的位置，而不是我所看到的好看的内容。
However with bootstrap
但是使用引导程序
<div class="checkbox-inline">
<asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />
</div>
This created the space, if you don't want the text bold, that class=checkbox
这创建了空间，如果您不希望文本加粗，则 class=checkbox
Bootstrap is very flexible, so in this case I don't need a hack, but sometimes you need to.
Bootstrap 非常灵活，所以在这种情况下我不需要 hack，但有时你需要。
