表标记内的Bootstrap输入组

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>