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

Question

I have a website, already built in bootstrap, it's a wordpress theme and it's responsive.

It's not up on the web so i can't show you exactly example of my theme but it follows this kind of markup http://getbootstrap.com/examples/carousel/

My header with menu is full width and slider is full width, and content is wrapped in container very similar as example from getbootstrap.

Now i need to add ads to the left and right side of the content, and this need to be something like this http://www.bigblue.rs/

but since bootstrap layout is responsive i tested with various width % and floats but i can't make it work. when i watch site on 21" they need to cover whole left and right emptiness, as site is resized, they should simply go out of the screen and not interfere with rest of the center content.

EDIT: heres demo on bootply with layout that i have on my website http://bootply.com/108951

Answer 1

While it won't get you the exact feel of the linked site, where the ads slide off the edge of the page, probably the easiest thing to do would be to use Bootstrap's responsive utilities classes ( http://getbootstrap.com/css/#responsive-utilities-classes ) to show and hide the ad divs as you resize the screen. I've edited your Bootply demo to show what I mean, in context: http://bootply.com/108988#

If you don't feel like digging through the code:

1. Choose at which point you would like your content to appear. Bootstrap's defaults (which can be found under "grid media queries" in the CSS documentation, sorry, I'm out of links) are sm , md , or lg . We'll go with lg for the sake of brevity here.

2. Add one <div class="visible-lg col-lg-1>Ad Content goes here!</div> above and below your existing three <div> s, for a total of 5 div s in the row.

3. Change the # on your existing <div class="col-lg-#> s so that there are 12 per row. This might be somewhat wonky, since you now have 5 columns.

This will cause the ad divs to show and hide at the breakpoints. While they are visible, they will resize responsively, just like the rest of the site.

Answer 2

Alright the approach is very simple.

On top of the page i added 2 divs. But to solve the problem with responsiveness i had to set margin of those 2 divs for each media size. Here is the styling.

.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;
}
}

So now i have 2 banners fixed on left and right side not overlaping with main content and when switched to other screen size it follows @media size untill it's on smallest device where it's no point to be visible at all.

Here is a bootply example but i don't know why it's overlapping there, i guess i use different padding and margin on my content div. http://bootply.com/110193