当鼠标悬停时，在Bootstrap行的右侧显示删除按钮

Question

我看到很多关于在容器上弹出删除按钮的示例。我想在 Twitter Bootstrap 行的右侧显示。

<div class="row">
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
</div>

很多示例都涉及在容器上使用相对位置；然而，我不想干扰.row上的现有表格显示，那么有没有更好的方法在Twitter Bootstrap行中为弹出窗口执行此操作？

编辑：我想在右侧显示一个按钮，在行中居中。 一个带有以下标记的按钮：

<button ..><i class="icon-remove-sign"></i></button>

只有在悬停时才显示。

- Brian Mains

---

你能给一个例子说明你想要实现什么吗？我不太明白你的意思。 - Sebsemillia

我想在右侧显示一个按钮，当您将光标悬停在行上时，提供删除选项。 - Brian Mains

就像这样？http://www.bootply.com/jy0it9mhr2 - Sebsemillia

是的！就是这样，非常感谢。我很惊讶在网上找不到任何东西，这正是我需要的。再次感谢！ - Brian Mains

你好。我会将其翻译成答案，以便您可以接受它。 - Sebsemillia

Answer 1

请尝试以下代码：

HTML：

<div class="row">
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
   <div class="hover-btn">
     <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Close</span>
     </button>
  </div>
</div>

CSS：

.row {
    position: relative;
  }

  .hover-btn {
     position: absolute;
     right: 15px;
     display: none;
  }

  .row:hover .hover-btn {
     display: block;
  }

工作示例

- Sebsemillia

---

使用CSS相对定位行的位置是否存在任何缺点？ - Brian Mains

我想不出有什么区别了。因为默认的 static 位置与 relative 差别不大。你可以在这里阅读更多信息： http://css-tricks.com/almanac/properties/p/position/ - Sebsemillia