Twitter bootstrap 如何在span'；在引导中使用css（而不是JS）复制内容？

我有一个bootstrap站点，在这里我为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的变化

---

谢谢

您可以通过如下方式填充表单内容来完成此操作：

<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>

CSS:

HTML:

联系表格内容
地图等内容

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

此外，没有必要使用包含空内容的div.span1。取而代之的是，删除它们，并在第一个div.span5中添加一个.offset1

另外，当在另一个span中嵌套span时，需要将其括在另一个div.row中。但是在本例中，我们可以完全删除div.span12，因为内行加起来是12（引导是“左”对齐的，因此您不必隐式地向右填充空间，并计入总共12个单元格）

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

如果您想调整div.container上的填充，您真的需要编辑无引导文件，这是另一个蜡球和学习曲线。调整填充会直接导致一系列其他测量结果不正常，最终需要调整一系列内容进行补偿。但是我想你会发现默认的填充是合适的

<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>

联系表格内容
地图等内容

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

<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>