2014-11-06 57 views
0

我使用引导程序3.3,并使用导航药丸来管理我的应用程序的页面 当我处于定制模式时,我可以在页面上执行一些操作,如重命名或删除。 为了做到这一点,我在药丸末端显示了一些按钮以提供功能。将按钮添加到引导程序navpills

,我想这样的事情:没有悬停

nav pill without hover

nav pill hover

和,但我不能管理,使一个很好的整合我的按钮在我的药片。

这是一丸

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

的HTML代码和我的CSS代码

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

我必须做一个小提琴,让你在这里打球:http://jsfiddle.net/Lmyoj9av/1/

的第一件事我想要做的是使按钮遵循相同的颜色字体方案,文本避孕药,因为今天我的按钮颜色不会改变,当丸是活跃的按钮是inv isible。

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

最后的事情是要看看是否有一个不那么丑陋的解决方案比把我绝对的药丸。

任何帮助将不胜感激。

感谢

+0

你能改一下你的问题或添加您想要的结果的一些截图?我读了你的问题三次,仍然不明白你想要什么.. :) – Sebsemillia 2014-11-06 14:18:27

+0

好吧,我已经添加了一些截图来解释。对不起,我的英语我是法语 – lgm42 2014-11-06 16:49:55

回答

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>