如何使用Twitter Bootstrap在图像上获取div

Question

I'm trying to show an image and divide it using bootstrap div columns , but the image is over the divs , so I can't click or bind jQuery to it. Here is my code:

#viewer {
    left: 0px;
    position: absolute;
    height: auto;
    margin-top: 16px;
    margin-bottom: 34px;
}

#left {
    cursor: pointer;
    height: auto;
}

#center {
    cursor: pointer;
    height: auto;
}

#right {
    cursor: pointer;
    height: auto;
}

<div class="container">
    <img class="img-responsive" src="wp-content/themes/Cassia/img/back.jpg" id="viewer">
        <div class="row">
            <div id="left" class="col-sm-5 col-md-5 col-lg-5 col-xs-5">
            </div>

            <div id="center" class="col-sm-3 col-md-3 col-lg-3 col-xs-4">
            </div>

            <div id="right" class="col-sm-4 col-md-4 col-lg-4 col-xs-3">
            </div>

        </div>

</div>

What am doing wrong here?

Answer 1

To make the image go behind you can add a negative z-index like this:

 #viewer { top:0; left: 0; position: absolute; height: auto; margin-top: 16px; margin-bottom: 34px; z-index: -1; } #left { cursor: pointer; height: auto; } #center { cursor: pointer; height: auto; } #right { cursor: pointer; height: auto; } 

 <div class="container"> <img class="img-responsive" src="http://gillespaquette.ca/images/stack-icon.png" id="viewer"> <div class="row"> <div id="left" class="col-sm-5 col-md-5 col-lg-5 col-xs-5">Left </div> <div id="center" class="col-sm-3 col-md-3 col-lg-3 col-xs-4">Center </div> <div id="right" class="col-sm-4 col-md-4 col-lg-4 col-xs-3">Right </div> </div> </div> 

Answer 2

It might be a little tricky, I did it using JS, maybe there is a simpler solution but anyways, I hope this helps:

JS Fiddle

I added some JS to solve the absolute positioning making parent element have 0 height and thats it.

$( document ).ready(function() {
    $( ".row" ).each(function() {
        var newHeight = 0, $this = $( this );
        $.each( $this.children(), function() {
            newHeight += $( this ).height();
        });
        $this.height( newHeight );
    });
    $('.row > div').css('height', '100%');
});