如何在引导程序中向输入框添加静态文本? [英] How to add static text to an input box in bootstrap?

问题描述

我有一个 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>

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

I would like to add static text inside the box on the right hand side.

例如(@ gmail.com，它在Google注册表单上的方式检查图像).帮助非常感谢！

Eg (@gmail.com, the way it is on the google sign up form check image). Help much appreciated!

推荐答案

像这样的事情?

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

这篇关于如何在引导程序中向输入框添加静态文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！