我迷失了方向,无论我做什么布局,都在做奇怪的事情。
我有一个简单的表单代码:
<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中,然后将每个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/