内嵌输入和图像在引导形式

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>