我迷失了方向,无论我做什么布局,都在做奇怪的事情。

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

<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>


看起来像css - 如何使用Bootstrap减小输入元素的宽度-LMLPHP
我要做的就是在保持响应式布局的同时将输入宽度减小到25%(或3列)。

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

最佳答案

我希望您可能做得正确,但是您需要为每个列都设置一个偏移量,以免使每个列内联并使用行。请参阅以下引导文件: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>


等等...

关于css - 如何使用Bootstrap减小输入元素的宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45290336/

10-12 07:27
查看更多