Bootstrap 3 - 如何使glyphicon和text_field_tag对齐？

Question

这是我们的Rails 4登录页面的样子： glyphicon和text_field_tag的高度不一样。以下是html.erb代码（请忽略）：

       <div class="form-group">
        <div class="input-group"> 
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-user"></i>
                    </span><%= text_field_tag :login, '' %></p></td>
                        </div>
                    </div>

                <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-lock"></i>
                                    </span> <%= password_field_tag :password, ''%>
                        </div>
                    </div>

text_field_tag 只有一个 size 选项，用于控制显示字符数。是否有一种方法可以增加标签的高度，使其与 glyphicon 的高度相匹配？如果需要，在此页面上使用内联样式或内部样式都可以。

- user938363

Answer 1

你需要给输入字段添加form-control类。这就是Bootstrap的设计思路。

- redelschaap

---

<%= text_field_tag :login, '', :class => "form-control" %> 可以正常工作。谢谢。 - user938363

<div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input id="i2" type="password" placeholder="密码" required="" name="i2" class="form-control"> </div> 对我没有起作用。 - loretoparisi

尝试将您的“span”更改为“div”。否则，请查看http://getbootstrap.com/css/#forms。 - redelschaap

@redelschaap 我只在密码 glyphicon 类型上遇到了这个问题。我尝试将 <i/> 替换为 <span/>，但没有成功。 - loretoparisi

Answer 2

在html中有一个表格结构的片段，包括'tr'和'td'，还有一个'/p'——可能是早期实现的遗物？它们需要被删除。

这里是一个单按钮示例。

<%= form_for (outer loop)
 <div class="input-group">
     <%= text_field_tag :login, placeholder: "Enter user", :class => "form-control" %>
      <span class="input-group-btn">
        <%= button_tag  name: nil, class: "btn btn-default", type: "submit" do %>
         <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
        <% end %>
     </span>
    </div> <!-- "input-group" --> 

<% end %> <!-- form_for -->

我认为这将解决显示对齐问题。

- Elvn