シンプルフォームが正しく表示されない

Question

私は現在Rails Tutorial Instagramからチュートリアルを行っていますが、シンプルフォーム/ブーストラップのスタイルを正しいものにすることはできません。

（関連部分のためのCTRL + F：私はまだこのフォームは見え方と超満足していないではないよ）：ここでは

が関連している

トップはチュートリアルからのもので、下は私のものですファイル：

マイ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; 
} 

私のHTMLファイル：

<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="text-center"> 
     <%= f.input :caption, placeholder: 'Enter caption here' %> 
    </div> 
    <div class="text-center"> 
     <%= f.button :submit, class: 'btn-success' %> 
     <% end %> 
    </div> 
</div> 

Answer 1

次を使用してHTMLを変更するには、そのための入力を形成するために.form-groupを追加します。

<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>