使用引导程序将图像放在输入字段旁边

时间:2016-09-05 17:03:09

标签: css twitter-bootstrap

我想在旁边放一个图像并使用bootstrap输入字段。我希望我的输出如下:`enter image description here

但是我得到了以下代码 enter image description here

 <div class="form-group row">
      <label for="inputTitle" class="col-sm-2 col-form-label">Title</label>
      <div class="col-sm-10">
<span class="glyphicon glyphicon-phone"></span>
        <input type="title" class="form-control" id="inputTitle" >
      </div>
    </div>

2 个答案:

答案 0 :(得分:2)

form-control类将使您的输入100%宽,这意味着它将流入下一行。此外,它会将其显示为block元素。

如果我是你,我会考虑使用input groups代替,这是达到同样效果的一种很好的整洁方式:

此外,您已为文本输入提供了title的无效类型。它可能只是text输入。

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-phone"></span></span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

我认为应该这样做

<div class="form-group">
     <label class="control-label">Title</label>
     <div class="input-group"><span class="input-group-addon"></span>
           <input type="text" class="form-control">
     </div>
</div>