css - 如何使用 Bootstrap 减少输入元素的宽度

Question

我快疯了，无论我做什么，我的布局都会做一些奇怪的事情。

我有一个简单的表单代码:

<div class="center jumbotron">
  <%= form_for(@user, url: signup_path) do |f| %>
        <%= render 'shared/error_messages' %>
        <%= f.label t(:email) %>
        <%= f.text_field :email, class: 'form-control' %>
        <%= f.label t(:password) %>
        <%= f.password_field :password, class: 'form-control' %>
        <%= f.label t(:first_name) %>
        <%= f.text_field :first_name, class: 'form-control' %>
        <%= f.label t(:last_name) %>
        <%= f.text_field :last_name, class: 'form-control' %>
        <%= f.label t(:student_id) %>
        <%= f.text_field :student_id, class: 'form-control' %>
        <%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
  <% end %>
</div>

看起来像我想要做的就是将输入的宽度减少到大约 25%(或 3 列)，同时保持响应式布局。

例如，当我尝试使用 form-control 类将整个表单包装在 div 中，然后使用行类将每个输入+标签包装在 div 中，并将另一个 div 包装为 col-xs-3 类时，输入变为内联和缩放而不是一个放在另一个下面。

Answer 1

我希望您可能做对了，但是您需要给每一列一个偏移量，这样它就不会使每一列内联并使用行。请在此处查看 Bootstrap 文档:http://getbootstrap.com/css/#grid-offsetting

应该是这样的

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= f.label t(:email) %>
    <%= f.text_field :email, class: 'form-control' %>
  </div>
</div>

等...