Rails Bootstrap how to format form_for (width grid collapses)

我的梦境 提交于 2019-12-03 10:16:37

问题


I'm trying to make a form with bootstrap-sass. I need to find the optimal configuration of bootstrap classes to make it look nice. It is not showing up the way I expect, specifically when the browser width is smaller than a certain size the spaces between labels and form fields collapse and it doesn't look good anymore. It would be ok if it only happens on small width, but that's not the case. I would really appreciate some help with this, really, what is the best way to format the form-horizontal with bootstrap?

Here's my code:

<form class="form-horizontal center" role="form">
<%= form_for @user do |f| %>
  <div class="field">
    <%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
    <%= f.text_field :fname %>
  </div>
  <div class="field">
    <%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
    <%= f.text_field :lname %>
  </div>
  <div class="field">
    <%= f.label :email, "Email:", class: "col-md-4 control-label" %>
    <%= f.text_field :email %>
  </div>
  <!--div class="form-group" -->
  <div class="field">
    <%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
    <%= f.text_field :comments %>
  </div>
  <div class="field">
    <%= f.radio_button :attend, 'yes', :checked => true, class: "col-md-4 control-label" %>
    <%= f.label :attend, 'I will attend.', :value => "yes" %><br />
    <%= f.radio_button :attend, 'no', :checked => false, class: "col-md-4 control-label" %>
    <%= f.label :attend, "I will not attend.", :value => "no" %>
  </div>
  <div class="field">
    <%= f.check_box :workshop, class: "col-md-4 control-label" %>
    <%= f.label :workshop, "Checkbox Description" %>
  </div>
  <div class="field">
    <div class="col-md-4">
    <%= f.submit "Submit", class: "btn btn-default btn-primary" %>
    </div>
  </div>
<% end %>
</form>

As you can see from commented out code, I first used form-group class, but it wasn't working well. Again, the problem is that spaces between labels and text fields collapse when width of the browser is less than certain size. The labels, which are right-aligned, lose their alignment. Browser has to be almost full screen to show up correctly, which isn't right because there's plenty of space for it to show up correctly on smaller width. I was following this guide http://getbootstrap.com/css/#grid

Edit: Added email field in the code, because it's of different size and easier to see the problem.


回答1:


you should take a look at http://getbootstrap.com/css/#forms-horizontal and you don't need to add form tag since you are already using form_for

 <%= form_for @user, :html => {:class => "form-horizontal center"} do |f| %>
      <div class="form-group">
        <%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
        <div class="col-md-8">
          <%= f.text_field :fname, class: "form-control" %>
        </div>
      </div>
      <div class="form-group">
        <%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
        <div class="col-md-8">
          <%= f.text_field :lname, class: "form-control" %>
        </div>
      </div>

      <div class="form-group">
        <%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
        <div class="col-md-8">
          <%= f.text_field :comments, class: "form-control" %>
        </div>
      </div>
      <div class="radio">
        <%= f.radio_button :attend, 'yes', :checked => true %> I will attend.
        <br />
        <%= f.radio_button :attend, 'no', :checked => false %> I will not attend.
      </div>
      <div class="checkbox">
        <%= f.check_box :workshop %> Checkbox Description
      </div>

      <%= f.submit "Submit", class: "btn btn-default btn-primary" %>  
 <% end %>


来源:https://stackoverflow.com/questions/21710486/rails-bootstrap-how-to-format-form-for-width-grid-collapses

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!