固定占位符引导程序

Question

我正在寻找最好的方法（使用bootstrap）这种占位符。您可以在占位符的右侧部分写入，同时占位符包含文本。

我想要的东西：

使用bootstrap，您可以使用：

<div class="input-group">
   <div class="input-group-addon">Text</div>
   <input id="name" type="text" class="form-control" name="text" value="text" placeholder="Additional Info">
</div>

结果：

有人知道怎么做吗？我想最好的选择是css样式，但也许有一个插件或任何快速方式。

Answer 1

如果您不需要输入下方的小文本，则可以使用水平格式。确保您的视口宽于768px ，否则输入将显示在标签下。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-2" for="name">Text</label>
        <div class="col-sm-6">
            <input id="name"  class="form-control" type="text" 
             placeholder="Additional Info">
        </div>
    </div>
</form>