Rails Bootstrap, wie formatieren form_for (Breite Raster minimiert)

Question

Ich versuche, ein Formular mit Bootstrap-Sass zu machen. Ich muss die optimale Konfiguration der Bootstrap-Klassen finden, damit sie gut aussieht. Es wird nicht so angezeigt, wie ich es erwarte. Insbesondere wenn die Browserbreite kleiner als eine bestimmte Größe ist, kollabieren die Leerzeichen zwischen Labels und Formularfeldern und es sieht nicht mehr gut aus. Es wäre in Ordnung, wenn es nur auf kleiner Breite passiert, aber das ist nicht der Fall. Ich würde wirklich etwas Hilfe mit diesem, wirklich schätzen, was ist der beste Weg, um die form-horizontal mit Bootstrap zu formatieren?

Hier ist mein 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> 

Wie Sie auf Kommentar Code sehen können, habe ich zuerst form-group Klasse, aber es war nicht gut funktioniert. Wieder besteht das Problem darin, dass Leerzeichen zwischen Beschriftungen und Textfeldern zusammenbrechen, wenn die Breite des Browsers unter einer bestimmten Größe liegt. Die Etiketten, die rechtsbündig ausgerichtet sind, verlieren ihre Ausrichtung. Der Browser muss fast bildschirmfüllend sein, um korrekt angezeigt zu werden, was nicht richtig ist, da es ausreichend Platz bietet, um auf kleinerer Breite korrekt angezeigt zu werden. Ich wurde nach diesem Leitfaden http://getbootstrap.com/css/#grid

bearbeiten: Hinzugefügt E-Mail-Feld im Code, weil sie von unterschiedlicher Größe sind und einfacher, das Problem zu sehen.

Answer 1

Sie einen Blick auf http://getbootstrap.com/css/#forms-horizontal nehmen sollte, und Sie müssen nicht form tag hinzufügen, da Sie bereits 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 %>