Html 向引导添加按钮

我使用Bootstrap3.3，我使用NavPills来管理我的应用程序页面 在自定义模式下，我可以在页面上执行一些操作，如重命名或删除。 为了做到这一点，我在药片末尾显示了一些按钮，以提供功能性

我想要这样的东西：

没有悬停

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

下面是一颗药丸的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>

我做了一把小提琴让你在这里演奏：

我想做的第一件事是使按钮遵循与文本pill相同的颜色字体方案，因为今天我的按钮颜色不变，并且当pill处于活动状态时，按钮不可见

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

最后一件事是看看是否有比把我的绝对量放在药丸里更丑陋的解决方案

任何帮助都将不胜感激

谢谢

请尝试以下操作：

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

---

您能否重新表述您的问题或添加一些您想要的结果的屏幕截图？我把你的问题读了三遍，仍然不明白你想要什么：）好的，我添加了一些屏幕截图来解释。对不起，我的英语我是法国人

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