如何使用Simple Form和Bootstrap將提交按鈕定位在輸入的同一行上？

使用簡單窗體和引導，我想有以下內容顯示，而不是在輸入選擇下面有提交按鈕。如何使用Simple Form和Bootstrap將提交按鈕定位在輸入的同一行上？

<%= simple_form_for :select_rollout, :html => {:class => "form-inline"}, do |f| %> 
    <%= f.input :rollout_id, collection: @rollout_options, :label => false %> 
    <%= f.button :submit, "Apply" %> 
<% end %>

以下解決方案僅適用於輸入（提交按鈕呈現在div之外的輸入）：

<%= form.input :city, label: 'City/State/Zip', input_html: {class: 'span3'}, wrapper_html: {class: 'controls controls-row'} do %> 
    <%= form.input_field :city, class: 'span1' %> 
    <%= form.input_field :state, class: 'span1' %> 
<% end %>

來源

2013-04-09 danebez

爲了解決這個問題，我需要使用input_field輸入塊內，並使用直列形式風格的包裝器塊：

<%= f.input :rollout_id, :label => false, wrapper_html: {class: "form-inline"} do %> 
    <%= f.input_field :rollout_id, collection: @rollout_options, :label => false %> 
    <%= f.button :submit, "Apply", :class => "btn-primary" %> 
<% end %>

希望這可以幫助別人。

來源

2013-04-10 08:47:32 danebez

嘗試添加pull-left或pull-right類的元素。這會將float: left或float: right屬性添加到您的對象。

但如果浮子是不會爲你工作，創建自己的類內嵌稱爲像這樣：（取決於你的網站實施）

.inline { display: inline-block; }

.inline { display: inline; }

或

並將inline類添加到您的對象。

來源

2013-04-09 14:44:27 xero

感謝您的建議，我嘗試過，但無濟於事請參見下面的解決方案。 – danebez 2013-04-10 08:44:31

對於稍後閱讀此內容的任何人，我通常只是將輸入包裝並提交到Flexbox中。您可以事後提供的造型你怎麼想每個元素看看（即：給表單組寬度：100％

<%= simple_form_for :select_rollout, :html => {:class => "form-inline"}, do |f| %> 
    <div class="flexbox-class"> 
    <%= f.input :rollout_id, collection: @rollout_options, :label => false %> 
    <%= f.button :submit, "Apply" %> 
    </div> 
<% end %> 


.flexbox-class { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    .form-group { 
    width: 100%; 
    } 
    .btn-primary { 
    margin-bottom: 16px 
    } 
}

來源

2018-01-10 09:07:48

如何使用Simple Form和Bootstrap將提交按鈕定位在輸入的同一行上？

回答

相關問題