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-width276px，所以你需要相应地增加宽度......

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

工作演示：http ://bootply.com/89823

于 2013-10-24T12:10:45.513 回答
0

尽量不要将每一个都包装在自己的<div>标签中。但是将所有 3 个标签包装在一个 <div>标签中。

   <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" width="20%">
                            <option>NA</option>
                            <option>RU</option>
                            <option>EU</option>
                            <option>SEA</option>
                        </select>                                   
                        <input type="text" placeholder="Name" class="form-control" maxlength="5" width="20%">
                     <button type="submit" class="btn btn-primary" width="20%">Go &raquo;</button>
                     </div>
                </form>
            </div>
于 2013-10-24T02:38:06.133 回答