如何在引导程序中使用 css（不是 JS）向 span 的内容添加填充？答案

【问题标题】：How could I add padding to span's contents using css (not JS) in bootstrap?如何在引导程序中使用 css（不是 JS）向 span 的内容添加填充？
【发布时间】：2013-03-27 21:25:47
【问题描述】：

我有一个引导站点，我在其中为 BODY 定义了一个背景图像，size=cover;在几乎所有现代浏览器中都能正常工作。

然后我定义了这样的结构：

<div class="row">
    <div class="span12">
        <div class="span1">&nbsp;</div>
        <div class="span5">CONTACT_FORM_CONTENT</div>
        <div class="span5">MAP_ETC_CONTENT</div>
        <div class="span1">&nbsp;</div>
    </div>
</div>

现在，来几张照片看看它的样子：

在桌面浏览器中查看时

在智能手机中查看时

问题

在桌面浏览器中查看网站时，一切正常。左/右的每个“”正确地充当左/右的填充，但是当使用智能手机查看时，这些“”被转换并放置在我的内容的顶部/底部，并且左/右的填充消失了。

有没有人知道如何在不使用 JS 的情况下解决这个问题？我想通过一些 CSS 更改来纠正整个网站。

谢谢

【问题讨论】：

coderwall.com/p/ercabq查看此链接

标签： twitter-bootstrap row containers padding html

【解决方案1】：

您可以通过像这样填充表单内容来完成此操作：

CSS：

.padded { padding: 10px; }

HTML：

<div class="row">
    <div class="span12">
        <div class="span1">&nbsp;</div>
        <div class="span5">
            <div class="padded">
                 CONTACT_FORM_CONTENT
            </div>
        </div>
        <div class="span5">MAP_ETC_CONTENT</div>
        <div class="span1">&nbsp;</div>
    </div>
</div>

【讨论】：

你好。您的解决方案是理想的，但我想避免更改 50 多个文件的代码。我想也许通过修改一些 boostrap.css 代码，一切都可以自动改变
在这种情况下，您可以覆盖 span5 类，但这会改变每个 span5 - 不确定这是否好。例如：.span5 { 宽度：450px;填充：0 10px； }

【解决方案2】：

将您的 div.row 包装在 div.container 中。不需要CSS。现在，当您使用移动设备并折叠空 div 时，.container 类将在您的 div 周围保持填充。这是理想的，因为它消除了多余的空白以利用屏幕空间，但保持填充。

此外，不需要 div.span1 的内容为空。相反，删除它们，并将 .offset1 添加到您的第一个 div.span5。

另外，当将 span 嵌套在另一个 span 中时，您需要将其包含在另一个 div.row 中。但在这种情况下，我们可以完全删除 div.span12，因为内行加起来为 12（引导程序是“左”对齐的，因此您不必隐式向右填充空间，并计入您的总数 12细胞）。

如果您想要页面下方的 span12，只需在下方添加另一个 div.row，然后是 div.span12。它们只需要包含在 div.container 中。设置 div.container 的样式以添加背景颜色。

如果您想调整 div.container 上的填充，您真的会想要编辑 Bootstrap LESS 文件，这是另一个蜡球和学习曲线。直接调整填充会使一堆其他测量值失控，你最终需要调整一堆东西来补偿。但我认为您会发现默认填充是合适的。

<div class="container" style="background-color:white;">
    <div class="row">
        <div class="span5 offset1">CONTACT_FORM_CONTENT</div>
        <div class="span5">MAP_ETC_CONTENT</div>
    </div>
</div>

【讨论】：