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

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>