在水平表单上放置内联元素

Question

我使用form-horizo​​ntal bootstrap类创建了一个表单。

我需要在输入字段旁插入一个文本。

这里是示例，＆＃34;下一个文字＆＃34;需要在输入文本字段旁边。

<div class="row" style="margin-left: 0; margin-right: 0;">
  <form action="#" class="form-horizontal" role="form" name="x" method="post" accept-charset="utf-8">
    <div class="form-group">
      <label class="col-xs-2 control-label" for="Data">Data:</label>
      <div class="col-xs-10">
        <input id="data" type="text" class="form-control" />
        <div >next text</div> 
      </div>
    </div>
  </form>
</div>

https://jsfiddle.net/fabioravizzotti/0emj5167/1/

可能吗？

感谢。

Answer 1

您可以使用input group和.input-group-addon来执行此操作。

<div class="col-xs-9">
  <div class="input-group">
     <input id="data" type="text" class="form-control" />
     <div class="input-group-addon">next text</div>
   </div>
</div>

这里是updated fiddle。