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

Question

我正在尝试显示图像并使用 bootstrap div 列 对其进行划分，但是图像位于 divs 之上，所以我无法点击 或将 jQuery 绑定(bind)到它。这是我的代码:

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