如何在引导程序中使用css（而不是JS）在内容中添加内容？

我有一个引导站点，我为BODY定义了一个背景图像，size = cover;在几乎所有现代浏览器中都能正常工作。如何在引导程序中使用css（而不是JS）在内容中添加内容？

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

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

现在，一些镜头来看看它的外观：

在查看在桌面浏览器 desktop view

在查看在智能手机 smartphone view

问题

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

有没有人有一个想法如何解决这个问题，而不使用JS？我想更正整个网站，只是一些CSS更改。

感谢

来源

2013-04-05 Enrique

https://coderwall.com/p/ercabq检查此链接 – 2013-04-11 10:55:16

您可以通过填充形式的内容是这样实现这一点：

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-05 14:58:32

嗨海。你的解决方案是理想的，但我想避免更改50多个文件的代码。我想也许通过修改一些boostrap.css代码，一切都可以自动更改 – Enrique 2013-04-07 14:42:42

在这种情况下，您可以重写span5类，但这会改变每个span5 - 不确定这是否好。例如：.span5 { width：450px; padding：0 10px; } – 2013-04-07 23:38:04

包装你div.row在div.container。没有CSS需要。现在，当你进入移动设备时，它会将空的div折叠起来，.container类将维持你div的填充。这是理想的，因为它摆脱了多余的空白以利用屏幕空间，但保持填充。

另外，没有必要为div.span1提供空白内容。相反，删除它们，并将.offset1添加到您的第一个div.span5。

另外，当在另一个跨度中嵌套跨度时，需要将其放在另一个div.row中。但是在这种情况下，我们可以完全删除div.span12，因为内部行最多可以添加12（Bootstrap是“左对齐”的，所以您不必隐式地向右侧填充空间，并且计算总共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-27 04:44:20

如何在引导程序中使用css（而不是JS）在内容中添加内容？

回答

相关问题