Twitter文本輸入裏面的引導下拉菜單

嗨我想要使用Twitter引導下拉菜單內部文本輸入內部構建表單。這樣的 - > enter image description here Twitter文本輸入裏面的引導下拉菜單

我已經成功只有做這樣

 <div class="input-append"> 
    <form method="get" action="/option" class="navbar-search" id="searchForm"> 
     <input type="text" size="16" placeholder="Search string" name="query"> 
     <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle searchMain" style="width: 150 px;"><span>Option 1</span> <b class="caret"></b></button> 
     <ul class="dropdown-menu" id="search-dropdown" style="left: 220px;"> 
     <li><a href="#" id="option-1">Option 1</a></li> 
     <li><a href="#" id="option-2">Option 2</a></li> 
     <li><a href="#" id="option-3">Option 3</a></li> 
     </ul> 
     <button type="submit" class="btn btn-primary"><i class="icon-white icon-search"></i></button> 
    </form> 
    </div>

但在這種情況下droptdown是文字輸入之外。使用Twitter Bootstrap可以在文本輸入中放置下拉菜單嗎？

來源

2013-01-03 dr0zd

廣泛的問題。看看CSS的'position'屬性。 – Jeffrey

你可以改述你的帖子來問一個具體的問題。正如所寫，您的文章不適合StackOverflow的問答格式。 – dgvid

如果我理解正確@ gv0zd想要在文本框內放置一個控件。 Bootstrap允許你追加和附加控件，這些控件必須將控件附加到文本框的一側。在這個例子中，你可以看到'gv0zd'想在這種情況下控件在文本框邊框內的文本框內下拉。我在這裏創建了一個解決方案：http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html –

看一看引導文檔的形式部分：http://twitter.github.com/bootstrap/base-css.html#forms

您的標記將是這個樣子：

<div class="input-append"> 
    <input class="span2" id="appendedDropdownButton" type="text"> 
    <div class="btn-group"> 
    <button class="btn dropdown-toggle" data-toggle="dropdown"> 
     Action 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     ... 
    </ul> 
    </div> 
</div>

這裏的關鍵是input-append類。

來源

2013-01-03 16:35:14 joshb

這不完全是我想要的。我想把按鈕放在文本輸入，而不是爲了組，但謝謝你的回答。 – dr0zd

Twitter文本輸入裏面的引導下拉菜單

回答

相關問題