2012-10-16 26 views
0

我想用引導程序追加搜索欄內的按鈕http://imgur.com/vUhXh,但它似乎並不像它的工作。它被顯示在educomer.herokuapp.com,我的代碼,我現在用的就是引導行內附加不在搜索表單上工作

 %form.form-search 
     .input-append 
      %input.span3.search-query{:placeholder => "Search Food", :type => "text"} 
      %button.btn{:type => "submit"} 
       %span.icon-search 

我試圖創建一個完全新的應用程序只是爲了看看是否有我的代碼有問題,但那不是問題

回答

0

您使用的是什麼版本的Bootstrap?我向your Heroku site添加了以下內容:

<div class="input-prepend"> 
    <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> 
</div> 
<div class="input-append"> 
    <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> 
</div> 

並按預期顯示。引導程序的changelog表示在2.0.2版本中添加了「在input-prepend/append組件中支持按鈕」。

+0

我使用2.1.0,是因爲我在haml中編寫這段代碼嗎?當我用erb編寫它時,它似乎也能工作,是否有解決方法? – afkmaster

+0

我很奇怪它在ERb中適合你,因爲當我粘貼你在imgur.com上鍊接的標記時,它對我不起作用。除非存在無關的空白乾擾,否則使用HAML應該沒有什麼不同。 –

+0

啊,是的,看起來空白是問題。當我將Bootstrap示例站點的標記更改爲全部一行時,該按鈕將移動到該字段的旁邊。嘗試按照[此處](http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_)中所述添加>和<符號。 –