2014-11-06 3 views
0

부트 스트랩 3.3을 사용 중이며 Nav 필을 사용하여 응용 프로그램 페이지를 관리합니다. 사용자 정의 모드에있을 때 이름 바꾸기 또는 삭제와 같은 페이지에서 일부 작업을 수행 할 수 있습니다. 그렇게하기 위해 필자의 마지막 부분에 functionnality를 제공하는 버튼을 보여줍니다.부트 스트랩 navpills에 단추 추가

나는 그런 걸 좋아하는 것 :

nav pill hover

및 호버

nav pill without hover

없이을하지만 내 알약 내 버튼의 좋은 통합을하게 관리 할 수 ​​없습니다. 여기

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

난 당신이 여기에 플레이 수 있도록 바이올린을 가지고있는 하나의 약

<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 코드 : http://jsfiddle.net/Lmyoj9av/1/

우선 I 오늘 버튼 색이 바뀌지 않고 알약이 활성화되어있을 때 버튼이 invoke 인 텍스트 필 드와 동일한 색상 글꼴 구성표를 따르도록 버튼을 만드는 것입니다 이블.

두 번째로 내 링크를 수직 가운데에 배치하는 것입니다.

마지막으로 먹는 피임약에 절대적으로 넣는 것보다 못생긴 해결책이 있는지를 확인하는 것입니다.

도움이 될 것입니다.

감사

+0

당신이 질문을 바꿔하거나 원하는 결과의 일부 스크린 샷을 추가 할 수 있습니까? 나는 당신의 질문을 세 번 읽었고 아직도 당신이 원하는 것을 이해하지 못한다 .. :) – Sebsemillia

+0

나는 설명 할 스크린 샷을 추가했다. 미안 해요 내 영어에 대한 나는 프랑스 인이야. – lgm42

답변

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> 

관련 문제