twitterブートストラップ入力追加ドロップダウンボタンが表の入力時に間違った側に表示される

Question

以下のhtmlは単独で動作しますが、テーブルの中に置くとドロップダウンボタンが入力の左側に表示されます右側にある。このページの「フォームコントロールを拡張する」のボタン付きの例のように見えるはずです：http://twitter.github.com/bootstrap/base-css.html#forms

どちらのアイテムも正しい形状です。すなわち、丸い角と真っ直ぐなエッジが正しい側にありますが、ボタンが入力の左側にあるため、直線のエッジが並んでいません。その隣にある丸い角。私はそれらをマークアップのように表示させ、ドロップダウンボタンを並べて入力すると、一緒に結合されているように見えます。

注：私は、レールアプリケーションで、最新のバージョンであるTwitterで最新のバージョンを使用していますが、これは変更されていません。 Twitterのブートストラップ・レール宝石。

<div class="btn-group input-append">  
    <input class="span2" id="fruit_selection" name="fruit" />   
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">apple</a></li> 
     <li><a href="#">orange</a></li> 
     <li><a href="#">banana</a></li> 
    </ul> 
</div> 

• は私が持っている唯一のCSSは、TwitterのブートストラップともjqueryのUIに付属しているものです。フォーム内の
• そのSafariとFirefoxで同じ。
• そのタグ。
• 私は考えられるdiv、span、クラス（append、prepend、btw-group、add-on、control-groupなど）の組み合わせを試してみました。

私は間違っていますか？私はそれを動作させるために追加することができる余分なCSSはありますか？どんな助けもありがとう。ボーナスポイントのために

： APPENDと先頭に追加例（ http://twitter.github.com/bootstrap/base-css.html#forms）またはテーブルのうちいずれかの私のサイトでは動作しません。私はどちらか一方だけを同時に使うことはできません。

Answer 1

私が今行っていることを見ると、ドロップダウングループのボタンの代わりに入力を使いたいと思っています。ブートストラップのドキュメントを調べると、ボタンの動作をコピーしてドロップダウングループを使って入力をサポートする独自のクラスを作成するだけで簡単にエミュレートできますが、そのセットアップの解決策は見つかりませんでした。

CSS代わりにこのCSSで

.btn-group .input:first-child { 
    border-bottom-left-radius: 4px; 
    border-top-left-radius: 4px; 
    margin-left: 0; 
} 

.btn-group .input { 
    float: left; 
    position: relative; 
} 

あなたがしなければならないすべてはあなたの入力フィールドに.inputクラスが含まれており、それが動作するはずです：

HTML

<div class="btn-group">  
    <input class="span2 input" id="fruit_select" name="fruit" />    
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">apple</a></li> 
     <li><a href="#">orange</a></li> 
     <li><a href="#">banana</a></li> 
    </ul> 
</div> 

Demo編集here。

Answer 2

div内のリストをコントロールグループとしてラップするようにしてください。例を以下に示します。私はあなたがコントロールグループを試みたが、別のショットをつけていると述べたことを知っています。このコードは、多くの試行錯誤の後に私のために働いた。幸運。

<div class="control-group"> 
    <div class="controls"> 
    <ul class="dropdown-menu"> 
     <li><a href="#">apple</a></li> 
     <li><a href="#">orange</a></li> 
     <li><a href="#">banana</a></li> 
    </ul> 
    </div> 
</div>