Question

我正在使用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>

主要也有灰色背景。页面的背景是白色的。我遇到的问题是文本是正确的灰色背景的边缘。我想要一些填充但是当我添加它时，图像跨度转到下一行。

我出错的任何想法？

Answer 1

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

Answer 2

@Dawood的建议如果适合你的话会很好。

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

<强> CSS

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

Answer 3

各种类都有填充。

例如：

asp.net网络表单应用：

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

上面的代码会将“显示已删除”文本放在太靠近复选框的位置，以便我看到很好看。

但是使用bootstrap

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

如果您不希望文本为粗体，则会创建空格，即class = checkbox

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

填充在bootstrap中

3 个答案: