如何缩小表单文本框宽度且不破坏垂直对齐？

你可以通过Bootstrap的网格布局来实现输入框宽度减半，同时保持标签和输入框的垂直对齐，之前的问题是因为单独给输入框加列类但没和标签的布局配合，调整后的代码如下：

<h2> Add User </h2>
<div class="user">
  <div class="container-fluid">
    <%= form_for(@user) do |f| %>
      <div class="form-group row">
        <%= f.label :first_name, class: 'col-xs-2 col-form-label' %>
        <div class="col-xs-6">
          <%= f.text_field :first_name, placeholder: "First name", class: 'form-control', required: 'required' %>
        </div>
      </div>
      <div class="form-group row">
        <%= f.label :last_name, class: 'col-xs-2 col-form-label' %>
        <div class="col-xs-6">
          <%= f.text_field :last_name, placeholder: "Last name", class: 'form-control', required: 'required' %>
        </div>
      </div>
      <div class="form-group row">
        <%= f.label :email, class: 'col-xs-2 col-form-label' %>
        <div class="col-xs-6">
          <%= f.email_field :email, placeholder: "Email", class: 'form-control', required: 'required' %>
        </div>
      </div>
      <div class="form-group row">
        <%= f.label :password, class: 'col-xs-2 col-form-label' %>
        <div class="col-xs-6">
          <%= f.password_field :password, placeholder: "Password", class: 'form-control', required: 'required' %>
        </div>
      </div>
      <div class="form-group row">
        <%= f.label :password_confirmation, "Confirm password", class: 'col-xs-2 col-form-label' %>
        <div class="col-xs-6">
          <%= f.password_field :password_confirmation, placeholder: "Confirm password", class: 'form-control', required: 'required' %>
        </div>
      </div>
      <%= f.submit "Add", class: "btn btn-lg btn-primary" %>
    <% end %>
  </div>
</div>

关键说明： #

• 把每个标签+输入框的组合包裹在form-group row里，这是Bootstrap表单网格布局的基础，能保证每个表单项的间距和对齐。
• 给标签添加col-xs-2（你可以根据实际需求调整这个列数，比如col-xs-3）来分配标签的宽度，同时保留col-form-label确保标签和输入框垂直居中对齐。
• 把输入框放在col-xs-6的容器里，这样输入框就会占据容器宽度的一半，完美符合你的需求。
• 去掉了原来的<br>标签，因为form-group已经提供了合适的垂直间距，不需要手动换行。

内容的提问来源于stack exchange，提问作者Rahul