HTML/CSS Bootstrap 响应式布局与并排 div 的广告？

Posted 2023-03-05

【中文标题】HTML/CSS Bootstrap 响应式布局与并排 div 的广告？

【英文标题】：HTML/CSS Bootstrap responsive layout with side by side div's for ads?

【发布时间】：2014-02-19 08:35:20

【问题描述】：

我有一个网站，已经内置在 bootstrap 中，它是一个 wordpress 主题，并且是响应式的。

它不在网络上，所以我无法向您展示我的主题的确切示例，但它遵循这种标记 http://getbootstrap.com/examples/carousel/

我的带有菜单的标题是全宽的，滑块是全宽的，内容被包装在容器中，与 getbootstrap 中的示例非常相似。

现在我需要在内容的左侧和右侧添加广告，这需要像这样http://www.bigblue.rs/

但由于引导布局是响应式的，我测试了各种宽度百分比和浮动，但我无法使其工作。当我在 21" 上观看网站时，他们需要覆盖整个左右空白，因为网站被调整大小，他们应该简单地走出屏幕而不干扰中心内容的其余部分。

编辑：这是我在我的网站 http://bootply.com/108951 上的布局在 bootply 上的演示

【问题讨论】：

请在JSFiddle创建一个演示页面。此外，屏幕尺寸可能与屏幕分辨率没有直接关系（例如，21 英寸显示器可以调整为 800x600 像素或 1920x1080 像素分辨率，具体取决于您的配置）

我在 bootply 上做了一个演示。我理解您所说的显示器分辨率，但我认为大部分 21" 的分辨率都在 1600 到 1920 之间。

【参考方案1】：

好吧，方法很简单。

在页面顶部我添加了 2 个 div。但是为了解决响应性问题，我必须为每种媒体尺寸设置这 2 个 div 的边距。这是样式。

.advertis-left 
left: 50%;
margin-left: -1050px;
position: fixed;
text-align: right;
top: 0;
width: 500px;

.advertis-right 
left: 50%;
margin-left: 570px;
position: fixed;
top: 0;
width: 500px;

/* Responsive Styles */
@media (max-width: 1199px) 

.advertis-left 
    margin-left: -950px;

.advertis-right 
    margin-left: 470px;



@media (max-width: 991px) 
.advertis-left 
    margin-left: -840px;

.advertis-right 
    margin-left: 360px;


@media (max-width: 767px) 

.navbar-nav .dropdown-submenu > .dropdown-menu 
    margin-left:10px;
    display:block;

.advertis-left,
.advertis-right 
    display:none;

所以现在我在左侧和右侧固定了 2 个横幅，不与主要内容重叠，当切换到其他屏幕尺寸时，它遵循@media 尺寸，直到它在最小的设备上，根本不可见。

这是一个 bootply 示例，但我不知道为什么它在那里重叠，我想我在内容 div 上使用了不同的填充和边距。http://bootply.com/110193

【参考方案2】：

虽然它不会让您获得链接网站的确切感觉，即广告从页面边缘滑落，但最简单的方法可能是使用 Bootstrap 的响应式实用程序类 (http://getbootstrap.com/css/#responsive-utilities-classes) 来显示并在调整屏幕大小时隐藏广告 div。我已经编辑了你的 Bootply 演示，以在上下文中显示我的意思：http://bootply.com/108988#

如果您不想深入研究代码：

选择您希望内容出现的时间点。 Bootstrap 的默认值（可以在 CSS 文档的“网格媒体查询”下找到，抱歉，我没有链接）是 sm、md 或 lg。为了简洁起见，我们将使用lg。

在现有的三个<div>s 的上方和下方添加一个<div class="visible-lg col-lg-1>Ad Content goes here!</div>，总共有5 个divs。

更改现有 <div class="col-lg-#>s 上的 #，以便每行有 12 个。这可能有点不稳定，因为您现在有 5 列。

这将导致广告 div 在断点处显示和隐藏。虽然它们是可见的，但它们会像网站的其他部分一样响应调整大小。

【讨论】：

好的，我了解您的方法，如果我找不到其他解决方案，我可以使用它作为替代方案。如果这是静态网站，这很容易，但这种响应性使它变得更加困难。