5

以下の html はそれ自体で正常に動作しますが、テーブル td 内に配置すると、入力の右側にあるはずのドロップダウン ボタンが左側に表示されます。このページの「フォーム コントロールの拡張」セクションにあるボタン付きの追加の例のように見えるはずです: http://twitter.github.com/bootstrap/base-css.html#forms

どちらのアイテムも正しい形状です。すなわち。丸みを帯びた角と直線のエッジは正しい側にありますが、ボタンが入力の左側にあるため、直線のエッジは整列していません。互いに隣り合っている丸みを帯びた角です。入力とドロップダウンボタンを並べて、マークアップのように表示して、結合されているように見せたいです。クラス「input-prepend」を使用しようとしても（そのようにしたいわけではありません）、変化しません。

注: twitter-bootstrap-rails gem の最新バージョンを介して、Rails アプリケーションで 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 に付属しているものです。
  • サファリでもファイアフォックスでも同じです。
  • フォームタグ内にあります。
  • 考えられる限り、div、span、クラス (append、prepend、btw-group、add-on、control-group など) の組み合わせを試しました。

私はそれを間違っていますか？それを機能させるために追加できる追加のcssはありますか? どんな助けでも大歓迎です。

ボーナス ポイント:追加と追加の例 ( http://twitter.github.com/bootstrap/base-css.html#forms ) は、テーブルの内外で私のサイトでは機能しません。同時に両方ではなく、どちらか一方しか使用できません。

4

2 に答える 2

4

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

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;
}

この CSS を配置したら.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>

デモ、ここで編集。

于 2012-04-04T01:11:11.657 に答える
0

クラスをコントロール グループとして 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>
于 2012-04-04T00:56:25.270 に答える