简单的表格没有正确显示

Question

我目前正在从Rails Tutorial Instagram进行教程，我似乎无法正确使用Simple Form / Boostrap样式。

（相关部分的CTRL + F：我对此表单看起来的方式仍然不是很满意）

Top来自教程，底部是我的：

以下是相关文件：

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