內嵌輸入和圖像在引導形式

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-inline與form-control文本字段和圖像，但沒有奏效。我有可能做錯了一些事情。

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>