css - 简单表格无法正确显示

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>