Einfache Form nicht korrekt angezeigt

Question

Ich mache derzeit das Tutorial von Rails Tutorial Instagram und ich kann nicht scheinen, um die einfache Form/Boostrap Styling richtig zu bekommen.

(STRG + F für relevanten Teil: Ich bin immer noch nicht nicht super zufrieden mit der Art und Weise dieser Form aussieht)

Top aus Tutorial ist, ist unten Mine:

Hier sind die einschlägige Dateien:

Meine CSS:

body { 
    background-color: #fafafa; 
    font-family: proxima-nova, 'Helvetica Neue', Arial, Helvetica, 
    sans-serif; 
} 

.navbar-brand { 
    a { 
    color: #125688; 
    } 
} 

.navbar-default { 
    background-color: #fff; 
    height: 54px; 
    .navbar-nav li a { 
    color: #125688; 
    } 
} 

.navbar-container { 
    width: 640px; 
    margin: 0 auto; 
} 
.posts-wrapper { 
    padding-top: 40px; 
    margin: 0 auto; 
    max-width: 642px; 
    width: 100%; 
} 
.post { 
    background-color: #fff; 
    border-color: #edeeee; 
    border-style: solid; 
    border-radius: 3px; 
    border-width: 1px; 
    margin-bottom: 60px; 
} 
.post-head { 
    height: 64px; 
    padding: 14px 20px; 
    color: #125688; 
    font-size: 15px; 
    line-height: 18px; 
    .thumbnail {} 
    .name { 
    display: block; 
    } 
} 
.image { 
    border-bottom: 1px solid #eeefef; 
    border-top: 1px solid #eeefef; 
} 
.caption { 
    padding: 24px 24px; 
    font-size: 15px; 
    line-height: 18px; 
} 
.form-wrapper { 
    width: 60%; 
    margin: 20px auto; 
    background-color: #fff; 
    padding: 40px; 
    border: 1px solid #eeefef; 
    border-radius: 3px; 
} 
.edit-links { 
    margin-top: 20px; 
    margin-bottom: 40px; 
} 

Meine HTML-Datei:

Answer 1

hinzufügen .form-group Eingänge bilden für die Ihre HTML ändern mit folgenden:

<div class="form-wrapper"> 
    <%= simple_form_for @post, html: { class: 'form-horizontal', multipart: true } do |f| %> 
    <div class="form-group"> 
     <%= f.input :image %> 
    </div> 
    <div class="form-group text-center"> 
     <%= f.input :caption, placeholder: 'Enter caption here' %> 
    </div> 
    <div class="form-group text-center"> 
     <%= f.button :submit, class: 'btn-success' %> 
     <% end %> 
    </div> 
</div>