Question

我想显示员工图片行，并且在悬停时，在包含此人姓名/传记的图片旁边会弹出一个进一步的说明框。

我知道在悬停时隐藏/显示div可用于实现此效果，但我不确定它将如何影响行/列布局。

任何帮助都将不胜感激。

HTML ：

<div class="row">
  <div class="col-xs-3">
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
    <div class="thumbnail">
      <img>
    </div>
  </div>
</div>

Answer 1

我相信您所寻找的是Popover，它应位于现有网格之上，不会影响图像的放置。

您可以通过在每个弹出窗口上设置数据属性来触发它在悬停时触发：

data-trigger="hover"

或将其传递到初始值设定项中：

.popover({ trigger: "hover" })

Stack Snippets中的演示：

$('[data-toggle="popover"]').popover({
  placement: "auto",
  trigger: "hover"
})

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="row">
  <div class="col-xs-4">
    <div class="thumbnail">
      <img src="http://i.imgur.com/wq83mXh.jpg" data-toggle="popover" 
           title="Mark Otto" data-content="3,972 commits / 496,347 ++ / 484,436 --" >
    </div>
  </div>
  <div class="col-xs-4">
    <div class="thumbnail">
      <img src="http://i.imgur.com/RLuBL13.png" data-toggle="popover" 
           title="Chris Rebert"data-content="1,114 commits / 33,796 ++ / 46,366 --">
    </div>
  </div>
  <div class="col-xs-4">
    <div class="thumbnail">
      <img src="http://i.imgur.com/UP58UYq.jpg" data-toggle="popover"
           title="fat" data-content="805 commits / 143,748 ++ / 100,852 --">
    </div>
  </div>
</div>

悬停为Bootstrap 3的对话框弹出窗口

1 个答案:

Stack Snippets中的演示：