引導輸入按鈕不能與其他領域的

a busy cat http://bryancorrell.com/FilterButton.PNG 引導輸入按鈕不能與其他領域的

我能解決這個問題對齊排列，但後來我失去了對輸入的圓角和無法弄清楚如何讓他們回來。請參見下面的鏈接：

<form class="simple_form form-inline" novalidate="novalidate" action="/dashboard/school" accept-charset="UTF-8" method="get"> 
    <div class="form-group select required filter_discipline_id"> 
    <select class="select required form-control" placeholder="Discipline" name="filter[discipline_id]" id="filter_discipline_id"> 
     <option value="">- Discipline -</option> 
     <option selected="selected" value="1">HW</option> 
     <option value="2">SW</option> 
    </select> 
    </div> 
    <div class="form-group"> 
    <input type="submit" name="commit" value="Filter" class="btn btn-default btn btn-primary form-control" /> 
    </div> 
</form> 

<br /><hr /><br /> 

<div class="input-group"> 
    <form class="simple_form form-inline" novalidate="novalidate" action="/dashboard/school" accept-charset="UTF-8" method="get"> 
    <div class="form-group select required filter_discipline_id"> 
     <select class="select required form-control" placeholder="Discipline" name="filter[discipline_id]" id="filter_discipline_id"> 
     <option value="">- Discipline -</option> 
     <option selected="selected" value="1">HW</option> 
     <option value="2">SW</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <input type="submit" name="commit" value="Filter" class="btn btn-default btn btn-primary form-control" /> 
    </div> 
    </form> 
</div>

的Ruby代碼正在生成的HTML表單：

<%= minimal_form_for :filter, url: @form_path, method: :get, html: {class: 'form-inline' } do |f| %> 
<%= f.error_notification %> 
<%= f.input :discipline_id, 
    collection: Discipline.all, 
    include_blank: '- Discipline -', 
    selected: params[:discipline_id] %> 
<div class="form-group"> 
    <%= f.button :submit, 'Filter', class: "btn-primary form-control" %> 
</div>

看起來simple_form被注入了「BTN」級。不知道如何停止。

來源

2016-01-21 Bryan Correll

如果你有

<div class="form-group"> 
    <input type="submit" name="commit" value="Filter" class="btn btn-default btn btn-primary form-control" /> 
</div>

通過

<div class="form-group"> 
    <input type="submit" name="commit" value="Filter" class="btn-primary form-control" /> 
</div>

更換有沒有必要多次，在這種情況下調用班，.btn導致您的問題

測試上你的小提琴，就像一個魅力;）

來源

2016-01-21 21:16:45 rmjoia

感謝您的迴應 - 類是重複的，因爲我simple_form默認情況下在按鈕上放置class =「btn btn-default」。我刪除了我的「btn」注入，但我該如何停止simple_form？我在上面添加了我的Ruby/Rails代碼 - 對不起，最初沒有包含它。 –

我對Ruby/Rails或simple_form一無所知，但是，你可以像「f.input」那樣傳遞「f.button」並查看會發生什麼嗎？ – rmjoia

好主意 - 我擺弄了一下，看起來像f。提交不注入class =「btn」： <％= f.submit'Filter'，class：「btn-primary form-control」％> –

在類BTN你有

刪除了這一行，這將正確對齊。

來源

2016-01-21 21:07:15

感謝您的迴應 - 我在哪裏有「margin-bottom：0px;」？ –

這是你的引導CSS文件 –

我只是進口bootstrap，所以我不能真正改變它的執行： import「bootstrap-sprockets」; 導入「bootstrap」; –

在你的情況下，你可以簡單地刪除th e btn班關閉輸入。

<input type="submit" name="commit" value="Filter" class="btn-primary form-control" />

或者，您可以添加以下到自己的CSS：

.form-group .btn { 
    margin-bottom: 15px; 
}

** **更新：當提交bug報告我發現我有邊距底部向後。

來源

2016-01-21 21:20:31

問題跟蹤：[github]（https://github.com/twbs/bootstrap/issues/18999） –

是的，這有點煩人，因爲simple_form增加class =「btn」，我不確定如何停止。 –

我會建議去第二個選項。爲你的應用創建一個css文件（如果你還沒有），並添加上面的CSS。引導程序可能會修復它，類似於我所做的，您將不會在以後的更新中發現任何不良影響。我甚至可以自己公佈這個改變。 –

引導輸入按鈕不能與其他領域的

回答

相關問題