如何在bootstrap中使用css(而不是JS)为span的内容添加填充？

Question

我有一个自助站点,我为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更改来纠正整个网站.

谢谢

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