在引导程序中填充答案

【问题标题】：Padding In bootstrap在引导程序中填充
【发布时间】：2013-04-14 14:04:22
【问题描述】：

我正在使用引导程序：

<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 也有灰色背景。页面背景为白色。我遇到的问题是文本正好在灰色背景的边缘。我想要一些填充，但是当我添加它时，图像跨度会转到下一行。

任何想法我哪里出错了？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

@Dawood 的建议对你有用。

如果您需要比这更多的微调，一种选择是在文本元素上使用填充，这是一个示例：http://jsfiddle.net/panchroma/FtBwe/

CSS

p, h2 {
    padding-left:10px;
}

【讨论】：

【解决方案2】：

我没有使用过 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>

访问此链接：http://getbootstrap.com/2.3.2/scaffolding.html 并阅读部分：偏移列。

我想我知道你做错了什么。如果您像这样对span6 应用填充：

<div class="span6" style="padding-left:5px;">
    <h2>Welcome</h2>
    <p>Hello and welcome to my website.</p>
</div>

这是错误的。您要做的就是为里面的元素添加填充：

<div class="span6">
    <h2 style="padding-left:5px;">Welcome</h2>
    <p  style="padding-left:5px;">Hello and welcome to my website.</p>
</div>

【讨论】：

干杯，但这不是我所追求的。
@plaidcorp 偏移类用于移动列而不是向该列的内部元素添加填充
@DawoodAwan 长话短说：我没有正确阅读这个问题（我有另一个议程）。你是对的，答案中的逻辑仍然成立。

【解决方案3】：

各种类都内置了填充。

例如：

一个 asp.net 网络表单应用程序：

<asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />

上面的这段代码会将“显示已删除”的文本放置在离复选框太近的地方，以至于我看到的东西很好看。

但是使用引导程序

<div class="checkbox-inline">
    <asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />
</div>

这创建了空间，如果您不希望文本加粗，则 class=checkbox

Bootstrap 非常灵活，所以在这种情况下我不需要 hack，但有时你需要。

【讨论】：