0

ポップオーバー内のインラインフォーム内に選択、入力、およびボタンを配置しようとしていますが、まだ成功していません。ドキュメントに従って、選択のさまざまな幅を試してみましたが、役に立ちませんでした

編集： Eric Bの提案を反映するように更新

コード：

<li><a data-placement="bottom" data-toggle="popover" data-container="body" type="button" href="#" id="login" >Login</a></li>
            <div id="popover-head" class="hide">Login</div>
            <div id="popover-content" class="hide">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <select class="form-control">
                            <option>NA</option>
                            <option>RU</option>
                            <option>EU</option>
                            <option>SEA</option>
                        </select> 
                        <input type="text" placeholder="Name" class="form-control" maxlength="5">
                        <button type="submit" class="btn btn-primary">Go To Login &raquo;</button>                                  
                     </div>
                </form>
            </div>

出力: 例 http://puu.sh/4XWmi.png

4

2 に答える 2

2

私はあなたが2つの問題を見ていると思います..

まず、Bootstrap 3 では、フォーム入力が特定の幅に設定されなくなったため、スタックを防ぐために入力の幅を設定する必要があります。これは、入力の属性を.form-control使用して幅をオーバーライドまたは設定することで実行できます。style=

次に、Bootstrap.popoverにmax-widthは 276px があるため、それに応じて幅を増やす必要があります...

.form-control {width:120px;}
.popover {max-width:400px;}

実際のデモ: http://bootply.com/89823

于 2013-10-24T12:10:45.513 に答える