输入字段和符号不在同一行

Question

我希望在输入标记中有一个嵌套符号，例如最后的QM符号（右对齐）。它有效，但它的线高不一样，EUR比输入字段大，有没有人有想法？

<div class="col-lg-12 col-md-12 col-sm-6">
   <div class="formBlock">
   <label for="price">Wohnfl&auml;che ca.</label><br/>
      <div class="input-group input-group-md">
      <input type="text" name="immo_id" id="immo_id" value="" />
      <div class="input-group-addon">QM</div>
      </div>
   </div>
</div>

Answer 1

尝试将form-control类添加到您的输入中：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin-top:100px"></div>
<div class="col-lg-12 col-md-12 col-sm-6">
   <div class="formBlock">
   <label for="price">Wohnfl&auml;che ca.</label><br/>
      <div class="input-group input-group-md ">
      <input type="text" name="immo_id" id="immo_id" value="" class="form-control"/>
      <div class="input-group-addon">QM</div>
      </div>
   </div>
</div>

Answer 2

您错过了.form-control课程

  

Form controls使用Bootstrap自动接收一些全局样式：

     

默认情况下，类<input>的所有文字<textarea>，<select>和.form-control元素的宽度均为100％。在.form-group中包装标签和控件以获得最佳间距

我们可以通过在任何基于文本的<input>之前，之后或两侧添加文本或按钮来扩展表单控件。将.input-group与.input-group-addon一起使用，可以将元素添加到单个.form-control

前面或附加元素

<div class="formBlock">
   <label for="price">Wohnfläche ca.</label><br>
      <div class="input-group input-group-md">
      <input type="text" name="immo_id" id="immo_id" class="form-control">
      <span class="input-group-addon">QM</span>
      </div>
   </div>