Hinzufügen von Twitter-bootstrap-styling-Schienen-Formular-Helfer

Nach dem Lesen der Antwort, die schlug ich Simple_form Juwel mit bootstrap-integration, ich habe es installiert und meine form nach simple_form Anweisungen, aber die Eingabefelder sind schwimmende Recht.

Dies ist das layout. Das Formular aufgerufen wird, mit der teilweise "shared/reg'

 <div class="container">

  <div class="row">
   <div class="span8"><%= yield %></div>
   <div class="span4">
   <%= render 'shared/reg' %>
   </div>

  </div>
</div>

Dies ist meine einfache form

<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
  <%= f.input :name %>
<%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %>
  <%= f.input :country,  :collection => [ "Canada", "Iceland", "Other"] %>
  <%= f.input :email %>
   <%= f.input :image, :as => :file %>
    <%= f.input :password %>
  <%= f.input :password_confirmation %>
 <%= f.button :submit %>
<% end %>

Unten sehen Sie, wie die Eingabe-Felder sind schwebende Recht in Bezug auf den submit-button.

Update

Sie fehlt <fieldset>

InformationsquelleAutor Leahcim | 2012-03-16

ruby-on-rails twitter-bootstrap

9

Sollten Sie versuchen, die folgenden:
```
<%= form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<fieldset>
  <legend>User Registration</legend>

  <div class="control-group">
    <%= f.label :name, class: "control-label" %>
    <div class="controls">
      <%= f.text_field :name %></p>
    </div>
  </div>

  <div class="form-actions">
    <%= f.submit %>
  </div>
</fieldset>
```
Beachten Sie, dass die bootstrap verwendet einige spezifische Selektoren für einige Klassen /html-Elemente, so dass, wenn Sie vergessen, um ein element oder eine Klasse, alles wird Durcheinander... In diesem Aspekt gibt es keine Spielräume.

On a side note, Sie sollten auf jeden Fall versuchen simple_form, und die bootstrap-integration. Es wird Ihr Leben leichter machen.

Update:
```
<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<fieldset>
  <legend>User Registration</legend>

  <%= f.input :name %>
  <%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %>
  <%= f.input :country,  :collection => [ "Canada", "Iceland", "Other"] %>
  <%= f.input :email %>
  <%= f.input :image, :as => :file %>
  <%= f.input :password %>
  <%= f.input :password_confirmation %>

  <div class="form-actions">
    <%= f.submit %>
  </div>
</fieldset>
<% end %>
```
Vielen Dank für die einfache form der Empfehlung. Allerdings, wenn ich versuchte es, ich habe immer noch dasselbe problem. Ich aktualisiert die OP mit Informationen und Bildern. Irgendeine Idee?
Ich aktualisiert meine Antwort. Probieren Sie es aus. Sollte jetzt funktionieren. Wieder, achten Sie besonders auf die html-oder die gewünschte css wird nicht angewendet. Alle, die simple_form --bootstrap nicht fügen Sie Wrapper für die Eingänge, aber es funktioniert nicht fügen Sie die fieldset-und Formular-Aktionen div um die reichen.
das ist lustig, weil keines der Beispiele auf simple_form github-Seite haben, Klasse form-Maßnahmen, die angewandt werden
nur kurze Bemerkung. @shuriu Sie haben einen Tippfehler. Sie nicht schließen Sie das fieldset in dem zweiten Beispiel 🙂

InformationsquelleAutor shuriu

Anstatt mit den .form-actions Klasse, die umhüllt den submit-button im grauen block (das funktioniert möglicherweise nicht für das design Ihrer Seite), Sie können auch wickeln Sie den Knopf in eine Kontrollgruppe wie diese:

  <div class="control-group">
    <div class="controls">
      <%= f.button :submit %>
    </div>
  </div>

Dies ist eigentlich nur erforderlich, wenn Sie mit der .form-horizontal - Klasse auf dem Formular selbst.

Wenn Sie sich für eine drop-in-Ersatz-Formular-builder, die Ausgänge der bootstrap-Stil-markup für Schienen, möchten Sie vielleicht zu prüfen, eine Gemme, die ich zusammen zu behandeln, diese Art der Sache:

https://github.com/potenza/bootstrap_form

Hier ist, wie würden Sie das setup eine horizontal-style-Formular mit dem submit-button ordentlich aufgereiht:

<%= bootstrap_form_for(@user, html: { class: 'form-horizontal' }) do |f| %>
  <%= f.text_field :email %>
  <%= f.password_field :password %>
  <%= f.password_field :password_confirmation, label: 'Confirm Password' %>
  <%= f.control_group do %>
    <%= f.primary "Save User" %>
  <% end %>
<% end %>

Dies ist das Beispiel-Ausgabe:

<form accept-charset="UTF-8" action="/users" class="form-horizontal" id="new_user" method="post">
  <div class="control-group">
    <label class="control-label" for="user_email">Email</label>
    <div class="controls">
      <input id="user_email" name="user[email]" size="30" type="text" />
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="user_password">Password</label>
    <div class="controls">
      <input id="user_password" name="user[password]" size="30" type="password" />
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="user_password_confirmation">Confirm Password</label>
    <div class="controls">
      <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <input class="btn btn-primary" name="commit" type="submit" value="Save User" />
    </div>
  </div>
</form>

Große Gem. Schöne Arbeit!

InformationsquelleAutor Stephen Potenza

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.