ブートストラップ・ディビジョンの上部にボタンを表示する方法は？

Question

私のクエリは、ボタンをレンダリングし、ブーストラップのフォームグループの各divに隠すようなものです。

<form class="form-horizontal" role="form"> 

    <div class="form-group"> 
     <div class="button-wrapper"> 
      <label class="col-sm-3 control-label no-padding-right">Label 01:</label> 
      <div class="col-sm-3"> 
       <input type="text" id="txt_codigo" class="form-control" maxlength="40" /> 
      </div> 
     </div> 

     <div class="button-wrapper"> 
      <label class="col-sm-3 control-label no-padding-right">Label 02:</label> 
      <div class="col-sm-3"> 
       <input type="text" id="txt_codigo" class="form-control" maxlength="40" /> 
      </div> 
     </div> 
    </div> 

</form> 

私はあなたに私が達成したいスクリーンショットを表示する：カーソルポインタを配置し、時にポインタ隠れたときに私が欲しいもの

Image of how it should be

は、右上のボタンを表示することですカーソルから移動します。 ボタンには単純なイベントが必要です。いくつかのCSSに関する

<div class="button-wrapper"> 

おかげ

Answer 1

は、ユーザーがラベルの親のdivの上に置いたときにアイコン/ IMGSを示しているいくつかのjQueryのです。

https://jsfiddle.net/yb4cdnzj/

HTML

<div class="lblClass"> 
    <label class="withBtns">Label 1</label> 
    <div class="buttons"> 
    <img class="btn1" src="#"> 
    <img class="btn2" src="#"> 
    <img class="btn3" src="#"> 
    </div> 
    <input type="text"> 

    <label>Label 2</label> 
    <input type="text"> 
</div> 

CSS

.lblClass { 
    width: 50%; 
    display: block; 
} 
label { 
    display: block; 
    padding: 5px; 
} 
.withBtns { 
    float: left; 
} 
.buttons { 
    display: none; 
} 
.buttons img { 
    float: right; 
    display: hidden; 
} 
input { 
    width: 100%; 
    padding: 5px; 
} 

jQueryの

$(".lblClass").hover(function() { 
    $(".buttons").toggle("slow"); 
}); 

Answer 2

か？ここで

.form-horizontal .button-wrapper { 
    display: none; 
} 
.form-horizontal:hover .button-wrapper { 
    display: inline-block; 
}