Question

我是bootstrap的新手，想知道如何将我的图标/图片内嵌到文本域的右侧？

我希望我的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使用正确的标记，并覆盖您不想要的样式：

＆＃13;

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

＆＃13;

<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>

＆＃13;

以引导形式

1 个答案: