Question

我有一个网站，已经内置了bootstrap，它是一个wordpress主题，它的响应。

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

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

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

但由于bootstrap布局是响应我测试了各种宽度％和浮动但我无法使其工作。当我在21英寸观看网站时，他们需要覆盖整个左右空虚，因为网站已调整大小，他们应该只是走出屏幕而不会干扰其他中心内容。

在bootply上进行了演示

Answer 1

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

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

选择您希望内容显示的位置。 Bootstrap的默认值（可以在CSS文档中的“网格媒体查询”下找到，抱歉，我没有链接）是sm，md或lg。为了简洁起见，我们将使用lg。
在现有的三个<div class="visible-lg col-lg-1>Ad Content goes here!</div>的上方和下方添加一个<div>，共计5 div秒。
更改现有#上的<div class="col-lg-#>，以便每行有12个。这可能有点不稳定，因为你现在有5列。

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

Answer 2

好的方法很简单。

在页面顶部，我添加了2个div。但要解决响应问题，我必须为每种媒体大小设置这两个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

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

2 个答案: