在悬停时，在引导行的右侧显示删除按钮 [英] Show Delete Button On Right Side Of Bootstrap Row, On Hover

问题描述

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

I saw a lot of examples of popping up a delete button over a container. I want to show over a Twitter Bootstrap row, on the right side of the row.

<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引导行的弹出窗口上执行此操作？

A lot of the samples involved using a relative position on the container; however, I don't want to mess with the existing table display on the .row, so is there a better way of doing that on popup for a twitter bootstrap row?

编辑：我想在该行的中央显示一个右侧的按钮。具有以下标记的按钮：

I'd like to show a button on the right, centered in the row. A button with the following markup:

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

仅在悬停时显示。

推荐答案

尝试以下代码：

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

工作示例

这篇关于在悬停时，在引导行的右侧显示删除按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！