如何在引导程序中将静态文本添加到输入框？

Question

我有一个HTML如下：

<div class="row">
 <div class="col-lg-4">
  <label for="email">E-Mail ID:</label>
 </div>
 <div class="col-lg-8 input-group" style="width:50%">
  <input type="text" id="userEmail" class="form-control" name="email" required />
  <span class="input-group-addon">@gmail.com</span>
  <hr/>
 </div>
</div>

我想在右侧的框中添加静态文本。

例如（@ gmail.com，它在谷歌注册形式检查图像的方式 ）。 非常感谢！

Answer 1

像这样的东西？

 .input-group input { border-right: 0px solid transparent; } .input-group .input-group-addon { background-color: transparent; border-left: 0px solid transparent; } 

 <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/> <div class="row"> <div class="col-lg-4"> <label for="email">E-Mail ID:</label> </div> <div class="col-lg-8 input-group" style="width:50%"> <input type="text" id="userEmail" class="form-control" name="email" required> <span class="input-group-addon">@gmail.com</span> </div> </div> 

Answer 2

移动跨度的input和设置的右填充input的大小span ： https://jsfiddle.net/d65wyzoj/1/

Answer 3

尝试这个

.new
{
  position: absolute;
  padding: 10px;
  right: 0px;
  line-height: 10px;
}



 <div class="form-group ">
    <label class="control-label">
      <code>.inner-addon.<i>right</i>-addon</code>
    </label>
    <div class="inner-addon right-addon">
      <span class="new">@gmail.com</span>
      <input type="text" class="form-control" placeholder="Search" />
    </div>
  </div>

Answer 4

这是您可以找到的最优雅的解决方案。

http://jsfiddle.net/t9ySU/

<div class="input-container">
    <input type="text"/>
</div>

.input-container {
    position: relative;
    float: left;
}
.input-container:after {
    position: absolute;
    right: 0;
    top: 0;
    content: '@gmail.com';
}