如何使用Twitter引導圖片上的div引導

Question

我試圖展示圖片並使用bootstrap div columns進行分割，但圖片已超過divs，因此我無法將click或綁定到jQuery。這裏是我的代碼：

#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> 

這裏做錯了什麼？

Answer 1

爲了使圖像去後面可以加一個負的z-index這樣的：

#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

這可能是一個有點棘手，我是用JS做，也許有一個簡單的解決方案，但不管怎麼說，我希望這有助於：

JS Fiddle

我加了一些JS來解決使父元素有0高度的絕對定位，這就是它。

$(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%'); 
});