html - 将按钮添加到 bootstrap nav pills

Question

我正在使用 Bootstrap 3.3 并且我正在使用 nav pills 来管理我的应用程序的页面 当我处于自定义模式时，我可以在页面上执行一些操作，例如重命名或删除。 为了做到这一点，我在 pill 的末尾显示了一些按钮以提供功能。

我想要这样的东西:

没有悬停

但我无法将我的按钮很好地集成到我的药丸中。

这是一个药丸的html代码

<ul class="nav nav-pills nav-justified page-tabs">
    <li class="tabPagePills">
        <a href="#Page1" data-toggle="tab">
            <span>Page1</span>
            <div class="pageCustomizationToolbar customization-item pull-right hidden">
                <a href="#" class="active" id="trash"> 
                    <i class="glyphicon glyphicon-trash"></i>
                </a>
                <a href="#" class="active" id="rename"> 
                    <i class="glyphicon glyphicon-pencil"></i>
                </a>
            </div>
        </a>
    </li>
</ul>

还有我的CSS代码

.pageCustomizationToolbar {
   position: absolute;
   right: 0px;
   top: 0px;
   margin-top: 2px;
   margin-right: 2px;
}

我做了一个 fiddle 让你在这里玩:https://jsfiddle.net/Lmyoj9av/1/

我想做的第一件事是让按钮遵循与文本药丸相同的颜色字体方案，因为今天我的按钮颜色没有改变，当药丸处于事件状态时按钮是不可见的。

第二件事是让我的链接垂直居中。

最后一件事是看看是否有比将我的绝对药物放入药丸中更不丑陋的解决方案。

任何帮助将不胜感激。

谢谢

Answer 1

尝试以下操作:

<ul class="nav nav-pills nav-justified page-tabs">
<li class="">
    <a href="#">
        Page1
        <i class="glyphicon glyphicon-trash pull-right" style="cursor: pointer" onclick="alert('del');"></i>

        <i class="glyphicon glyphicon-pencil pull-right" style="cursor: pointer" onclick="alert('edt');"></i>
    </a>
</li>