css - Make an element overlap contents below it using Bootstrap -
i've started playing twitter bootstrap , i'm trying make image in row overlap contents below it. how can accomplish that? tried giving contents below negative margin doesn't seem work in chrome dev tools. here's link have, summarize:
<div class="container" role="main"> <div class="row"> <div class="col-md-1"> </div> <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/252x136" alt="..."> </a> </div> <div class="col-md-8"> </div> </div> <div class="jumbotron"> </div> </div>
as can see <img>
pushes entire jumbotron down. i'd overlap instead until screen size collapses (responsively) , image should no longer overlap in case.
update
i ended combining @joshc , @adrian's solutions best of both:
@media (min-width: 992px) { #overlap { height: 70px; } }
you absolutely position .col-md-3.img
element, , float .col-md-8.nav
right. added classes elements , placed styling in media query ensure doesn't conflict mobile/tablet styling. seems work on screen sizes.
updated example here - full screen example
@media (min-width: 992px) { .col-md-3.img { position: absolute; text-align: center; } .col-md-3.img .thumbnail { display:inline-block; } .col-md-8.nav { float: right; } }
add text-align:center
center .thumbnail
element, inline-block
fix background-related issues result absolute positioning.
Comments
Post a Comment