Question

我的删除按钮和我的文本字段没有很好地对齐，请参见图片。

我使用Cocoon gem生成该字段。这是表单代码：

= simple_form_for studynote, validate: true do |f|
  #pericopes
    = f.simple_fields_for :pericopes do |pericope|
      = render 'pericope_fields', f: pericope
    .links
      = link_to_add_association t('add_pericope'), f, :pericopes, class: 'new btn-xs'
  = f.input :title
  = f.input :note, :input_html => { :rows => 20 }
  = f.button :submit, class: "btn-primary"

字段部分：

.nested-fields
  .input-group.mb-0
    = f.input :name,
              label: "#{ t('simple_form.labels.pericopes.name') } 1",
              placeholder: 'Genesis 1:1-3:21',
              autofocus: true,
              class: "input-group"
    %span(class = "input-group-btn")
      = link_to_remove_association '', f, class: 'delete', id: 'delete_pericope'

生成的HTML就像这样

<form novalidate="novalidate" class="simple_form edit_studynote" id="edit_studynote_94" data-client-side-validations="{&quot;html_settings&quot;:{&quot;type&quot;:&quot;SimpleForm::FormBuilder&quot;,&quot;error_class&quot;:&quot;help-block&quot;,&quot;error_tag&quot;:&quot;span&quot;,&quot;wrapper_error_class&quot;:&quot;has-error&quot;,&quot;wrapper_tag&quot;:&quot;div&quot;,&quot;wrapper_class&quot;:&quot;form-group&quot;,&quot;wrapper&quot;:&quot;vertical_form&quot;},&quot;number_format&quot;:{&quot;separator&quot;:&quot;.&quot;,&quot;delimiter&quot;:&quot;,&quot;},&quot;validators&quot;:{&quot;studynote[pericopes_attributes][][name]&quot;:{&quot;presence&quot;:[{&quot;message&quot;:&quot;moet opgegeven zijn&quot;}]},&quot;studynote[title]&quot;:{&quot;presence&quot;:[{&quot;message&quot;:&quot;moet opgegeven zijn&quot;}]},&quot;studynote[note]&quot;:{&quot;presence&quot;:[{&quot;message&quot;:&quot;moet opgegeven zijn&quot;}]}}}" action="/studynotes/94" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="NXwvUnWX/TRkVsN/8+sIta3YLlT1MB80MVppFIUzNqG/ex6tC0B2ZGrsxoVwyYMHUmeG/MDXeeh96NuV34XzpQ==" /><div id='pericopes'>
<div class='nested-fields'>
<div class='input-group mb-0'>
<div class="form-group string required studynote_pericopes_name"><label class="control-label string required" for="studynote_pericopes_attributes_0_name"><abbr title="required">*</abbr> pericoop 1</label><input class="form-control string required" autofocus="autofocus" placeholder="Genesis 1:1-3:21" type="text" value="Genesis 2" name="studynote[pericopes_attributes][0][name]" id="studynote_pericopes_attributes_0_name" /></div>
<span class='input-group-btn'>
<input type="hidden" name="studynote[pericopes_attributes][0][_destroy]" id="studynote_pericopes_attributes_0__destroy" value="false" /><a class="delete remove_fields existing" id="delete_pericope" href="#"></a>
</span>
</div>
</div>

<input type="hidden" value="114" name="studynote[pericopes_attributes][0][id]" id="studynote_pericopes_attributes_0_id" /><div class='links'>
<a class="new btn-xs add_fields" data-association="pericope" data-associations="pericopes" data-association-insertion-template="&lt;div class=&#39;nested-fields&#39;&gt;
&lt;div class=&#39;input-group mb-0&#39;&gt;
&lt;div class=&quot;form-group string required studynote_pericopes_name&quot;&gt;&lt;label class=&quot;control-label string required&quot; for=&quot;studynote_pericopes_attributes_new_pericopes_name&quot;&gt;&lt;abbr title=&quot;required&quot;&gt;*&lt;/abbr&gt; pericoop 1&lt;/label&gt;&lt;input class=&quot;form-control string required&quot; autofocus=&quot;autofocus&quot; placeholder=&quot;Genesis 1:1-3:21&quot; type=&quot;text&quot; name=&quot;studynote[pericopes_attributes][new_pericopes][name]&quot; id=&quot;studynote_pericopes_attributes_new_pericopes_name&quot; /&gt;&lt;/div&gt;
&lt;span class=&#39;input-group-btn&#39;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;studynote[pericopes_attributes][new_pericopes][_destroy]&quot; id=&quot;studynote_pericopes_attributes_new_pericopes__destroy&quot; value=&quot;false&quot; /&gt;&lt;a class=&quot;delete remove_fields dynamic&quot; id=&quot;delete_pericope&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
" href="#">Voeg nog een pericoop toe</a>
</div>
</div>

据我所知，文本字段和按钮都应该在同一个.input-group标记内。按钮应该有自己的.input-group-button范围。 See for documentation：https://getbootstrap.com/docs/4.0/components/input-group/

有什么建议吗？

文本字段和按钮未对齐

0 个答案: