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

Question

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

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

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

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

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

编辑：在我的网站http://bootply.com/108951上使用布局进行bootply演示

Answer 1

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

如果你不想挖掘代码：

1. 选择您希望内容显示的位置。 Bootstrap的默认值（可以在CSS文档中的“网格媒体查询”下找到，抱歉，我没有链接）是sm ， md或lg 。 为了简洁，我们将在这里使用lg 。

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

3. 更改#在你现有的<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