Question

我正在尝试使用一个选择，一个输入和一个按钮来对齐内部形式的内联形式，但是到目前为止我还没有成功。我已经按照文档进行了尝试，尝试选择不同的宽度，但无济于事

编辑更新以反映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>

输出： Example http://puu.sh/4XWmi.png

Answer 1

我认为你看到了2个问题..

首先，在Bootstrap 3中，表单输入不再设置为特定宽度，因此您需要为输入设置宽度以防止堆叠。这可以通过覆盖.form-control或使用输入中的style=属性设置宽度来完成。

其次，Bootstrap .popover的{{1}}为276px，因此您需要相应地增加宽度......

max-width

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

Answer 2

请勿将每个标记包装在自己的<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>

Bootstrap - 在弹出框内对齐选择并在表单内提交

2 个答案: