インライン入力とブートストラップ形式のイメージ

Question

ブートストラップが新しく、アイコン/ピクチャをテキストフィールドの右側に配置するにはどうすればいいですか？

textFieldを少し小さくして（何もハードコーディングせずに）、画像が同じ行にあり、同じスペースを使用したいと思います。私はどんなcol-*-*画面サイズでも動作するはずです。

これは私のコードです。イメージはテキストフィールドの下にあります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<br> 
 
<br> 
 
<div class="col-lg-6"> 
 
    <div class="input-group" style="float:left;"> 
 
    <textarea class="form-control"></textarea> 
 
    <div style="float:left;"><a href="#" tabindex="-1" style="width: 100%;"><img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" /></a></div> 
 
    </div> 
 
</div>

PS：私は、テキストフィールドと画像上form-controlでform-inlineを使用しようとしましたが、それはうまくいきませんでした。私は何かを間違って実行した可能性があります。

Answer 1

あなたがしたくないだけでスタイルを上書き input groupためと

ために適切なマークアップ：

.input-group .input-group-addon { 
 
    background-color: transparent; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<br> 
 
<br> 
 
<div class="col-lg-6"> 
 
    <div class="input-group"> 
 
    <textarea class="form-control"></textarea> 
 
    <span class="input-group-addon" id="basic-addon1"><a href="#" tabindex="-1"><img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" /></a></span> 
 
    </div> 
 
</div>

が