表内的Bootstrap输入组 <td> 标签

Question

尝试将bootstrap input-group-addon添加到表<td>标记内的输入字段时遇到问题。 当添加所有需要的类时，符号和输入字段之间会有一些空间。

<td>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">$</div>
        <%= text_field_tag "variables[#{@home_price_budget.name}]", params.fetch(:variables, {}).fetch(@home_price_budget.name, ''), value: @home_price_budget.default.to_i, class: "form-control", type: 'number' %>
    </div>
  </div>
</td>

结果：

这个问题有什么解决方案？ 谢谢。

Answer 1

确保您没有对表单输入应用边距，如果在全局CSS规模上（所有输入元素）这样做会产生此问题

这是一个简单的JSFiddle，显示了简单的边距如何实现这一点。

的HTML：

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="input margin" aria-  describedby="basic-addon1">
</div>

CSS：

input {
    margin-left: 7px;
}

Answer 2

使用“ span”代替“ div”，将HTML修改为：

<td>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <%= text_field_tag "variables[#{@home_price_budget.name}]", params.fetch(:variables, {}).fetch(@home_price_budget.name, ''), value: @home_price_budget.default.to_i, class: "form-control", type: 'number' %>
    </div>
  </div>
</td>