Question

我希望文本框不那么宽，可能只有一半大小？我该怎么做？ Here is what it looks like

我尝试使用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

使用CSS将宽度（或最大宽度）应用于文本框。这只会影响那些元素，而不会影响它们周围的容器。

Answer 2

.container-fluid的宽度为100％。

所以将表单包装在容器流体中的另一个div中，并将max-width设置为500px。这应该会缩小形式。玩弄它。

如何使文本框不那么广泛？

2 个答案: