強制引導的事先鍵入的內容下拉匹配一個自定義輸入寬度

Question

我與引導的事先鍵入的內容工作，並加入像這樣輸入：

<div class="row"> 
    <div class="span12"> 
     <form class="centered"> 
       <input id="main_search" type="text" class="search-query my-search" data-provide="typeahead"> 
     </form> 
    </div> 
</div> 

我有以下的CSS代碼，實際上只是擴大我的搜索框是「長」，並在跨中：

.centered { 
    text-align:center; 
} 

/* Make the main search box wider */ 
.my-search { 
    width: 80%; 
} 

我的問題是，當我使用事先鍵入的內容，自動完成的結果是，只要只能作爲他們‘必須’來顯示整個詞/短語而我希望它們與實際輸入框一樣長。基本上就像您在Google.com上看到的即時搜索功能一樣。

This closed issue建議我應該可以操縱CSS來實現我想要做的事情，但是我對複雜的CSS並不擅長，並且我正努力讓繼承恰到好處地讓任何CSS實際應用到正確的元素。最重要的是，我是不確定如何確保下拉菜單繼承輸入的長度（以便它可以在瀏覽器調整大小的情況下工作）。

感謝您提供任何幫助！

當前代碼： JSFiddle

Answer 1

沒有你發佈你的代碼或對工作示例的鏈接，這只是一個猜測，但嘗試這個CSS

.my-search, .typeahead.dropdown-menu > li { 
    width: 80% !important; 
}