3

我有一个引导站点，在那里我为 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>

现在，一些照片来看看它的外观：

在桌面浏览器中查看时 桌面视图

在智能手机中查看时 智能手机视图

问题

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

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

谢谢

4

2 回答 2

8

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

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>
于 2013-04-05T14:58:32.677 回答
0

将您的 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>
于 2013-05-27T04:44:20.170 回答