[英]How to get divs over an image using Twitter Bootstrap
我正在嘗試顯示圖像並使用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>
這是怎么了?
要使圖像落后,您可以添加一個負Z索引,如下所示:
#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>
可能有些棘手,我使用JS完成,也許有一個更簡單的解決方案,但是無論如何,我希望這會有所幫助:
我添加了一些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%');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.