Как сделать только текстовое поле менее широким?

Question

Я хочу, чтобы текстовые поля были менее широкими, может быть, вдвое меньше?Как бы я это сделал? Вот как это выглядит

Я пытался использовать col-xs-5, но это разрушило бы вертикальное выравнивание.

<h2>
Add User
</h2>

<div class="user">
  <div class="container-fluid">
    <%= form_for(@user) do |f| %>
      <%= f.label :first_name, :class => 'col-form-label' %>
      <%= f.text_field :first_name, :placeholder => "First name", :class => 'form-control', :required => 'required' %><br>
      <%= f.label :last_name, :class => 'col-form-label' %>
      <%= f.text_field :last_name, :placeholder => "Last name", :class => 'form-control', :required => 'required' %><br>
      <%= f.label :email, :class => 'col-form-label' %>
      <%= f.email_field :email, :placeholder => "Email", :class => 'form-control', :required => 'required' %><br>
      <%= f.label :password, :class => 'col-form-label' %>
      <%= f.password_field :password, :placeholder => "Password", :class => 'form-control', :required => 'required' %><br>
      <%= f.label :password_confirmation, "Confirm password" %>
      <%= f.password_field :password_confirmation, :placeholder => "Confirm password", :class => 'form-control', :required => 'required' %><br>

      <%= f.submit "Add", :class => "btn btn-lg btn-primary" %>
		<% end %>
  </div>
</div>

Answer 1

.контейнер-жидкость имеет ширину 100%.

Так что оберните форму в другом элементе внутри контейнера-жидкости и установите максимальную ширину равной 500 пикселей.Это должно сжать форму меньше.Поиграйте с этим.

Answer 2

Применение ширины (или максимальной ширины) к текстовым полям с помощью CSS.Это повлияет только на эти элементы, а не на контейнер вокруг них.