簡單的窗體不能正確顯示

Question

我目前正在從Rails Tutorial Instagram開始教程，我似乎無法獲得簡單窗體/ Boostrap樣式的正確性。

（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

添加.form-group形成輸入，用於與以下更改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="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>