Question

每次用户点击添加字段时，我都会使用javascript添加一组字段。

我正在使用自举网格。

左侧区域表现良好。当我在右侧添加字段时，它会跳过并开始将其添加到div的底部，如下所示：

这是代码：

主视图

<div class="container">
  <div class="row create-form">
    <%= simple_form_for @vacancy do |f| %>
      <div class="col-xs-12 col-md-6">
        <%= f.hidden_field :recruiter_id, value: current_recruiter.id %>
        <%= f.input :name, label: false, placeholder: "job title"%>
        <%= f.input :address, label: false, placeholder: "location", input_html: {id: "user_input_autocomplete_address" } %>
        <%= f.input :description, label: false, placeholder: "description", :input_html => {:rows => 7}  %>
        <%= f.input :jobtype_id, collection: Jobtype.all, label: false, prompt: "sector"%>
        <%= f.input :jobterm_id, collection: Jobterm.all, label: false, prompt: "Contract type"%>
        <%= f.input :wage_cents, label: false, placeholder: "wage (optional)" %>
      </div>


        <%= f.simple_fields_for :vacancyschedules do |vacancyschedule| %>
          <div class="col-xs-6 col-md-6" id="vacancyschedules">
            <%= render "vacancyschedule_fields", f: vacancyschedule %>
          </div>
        <% end %>


      <div class="links">
        <%= link_to_add_association 'add schedule', f, :vacancyschedules %>
      </div>

      <div class="actions">
        <%= f.submit %>
      </div>

    <% end %>
    </div>
  </div>
</div>

部分（这是在id为vacancyschedules的div中呈现

<div class="nested-fields">
  <div class="field">
    <%= f.input :start_hour, as: :time, default: Time.parse('09:00')%>
  </div>
  <div class="field">
    <%= f.input :end_hour, as: :time, default: Time.parse('17:00')%>
  </div>
  <div class="field">
    <%= f.text_field :start_date, placeholder: "start date", class: 'form-control', data: { date_format: 'YYYY/MM/DD' }, label: false, error: false  %>
  </div>
  <%= link_to_remove_association "X", f %>
</div>

我尝试修改一下以使其正常工作，到目前为止我所取得的“最佳”是遵循以下行为：

我通过在部分中添加一些引导列来实现这一目的：

<div class="nested-fields col-xs-6 col-md-6">
  <div class="field">
    <%= f.input :start_hour, as: :time, default: Time.parse('09:00')%>
  </div>
  <div class="field">
    <%= f.input :end_hour, as: :time, default: Time.parse('17:00')%>
  </div>

  <div class="col-md-6 field"> 
    <%= f.text_field :start_date, placeholder: "start date", class: 'form-control', data: { date_format: 'YYYY/MM/DD' }, label: false, error: false  %>
  </div>
  <%= link_to_remove_association "X", f %>
</div>

我在这些变化背后的理由是，我认为开始日期栏正在推动它。包装元素必须是屏幕的一半。还尝试使用float：right，但没有成功。

任何人都有任何提示可以实现这一目标吗？

非常感谢。

Answer 1

标记中存在错误，这也可能解释了您遇到的一些保存问题：您有重复的id元素。一个id在html中应该是唯一的（并且在一个表单内部这是特别相关的，因为事情将在那里明显，但不会发布到服务器）。

现在要处理你的布局问题，我会有两个md-6列，并确保cocoon在第二列中添加。

我写haml，这是一个不那么冗长，我觉得更清楚一点。所以你的观点应该是这样的：

.container
  .row.create-form
    = simple_form_for @vacancy do |f|
      .col-xs-12.col-md-6
        = # your fixed fields here

      #vacancy-schedules.col-xs-12.col-md-6
        = f.simple_fields_for :vacancyschedules do |vacancyschedule| 
          = render "vacancyschedule_fields", f: vacancyschedule
        = link_to_add_association 'add schedule', f, :vacancyschedules

      .actions
        = f.submit

有点不清楚你想要提交按钮的列，我会把它放在第一列，或者放在最后的自己的行中。我还将.col-xs-12.col-md-6应用于两者。因为我的div是一个容器div，而不是插入部分的大小。您仍然可以通过向col-md-6添加.nested-fields来缩放插入的部分内容。

如何确保某些添加的元素保留在屏幕引导的右侧

1 个答案: