在引导行右侧显示删除按钮，悬停

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引导行的弹出窗口上有没有更好的方法呢？

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

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

其中仅显示悬停。

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; 
    } 

Working Example