如何確保某些添加的元素停留在屏幕引導程序的右側

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

<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列，並確保在第二列添加繭。

我寫的哈姆，這是一個不太冗長，我發現有點清晰。所以，你的觀點應該是這樣的：

.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來縮放插入的部分。