Twitter bootstrap 3 具有水平形式的模式对话框，并排分组

我试图在引导模式对话框中并排呈现表单元素。这是因为它们在所有意图和目的上都是相同的选项，只是表示不同项目的选项，而当前呈现给用户的方式基本上是：

<table>
  <tr>
    <td><!--Option Group 1--></td>
    <td><!--Option Group 2--></td>
    <td><!--Option Group 3--></td>
  </tr>
</table>

因此，使用Bootstrap 3文档中的模态对话框示例，结合Bootstrap 3文档中的form horizontal示例，再加上一些span的使用，尝试为每个部分做50%的宽度（希望从左到右平铺部分），我得出了：

 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="addLabel">Title of Dialog</h4>
        </div>
        <form class="form-horizontal" role="form">
            <div class="modal-body">
                <div class="row">
                    <div class="span6">
                        <div class="form-group">
                            <label for="inputUser" class="col-sm-1 control-label">User</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="inputUser" value="" disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-1 control-label">Password</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-5">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox"> Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="form-group">
                            <label for="inputUser" class="col-sm-1 control-label">User</label>
                            <div class="col-sm-5">
                                <input type="email" class="form-control" id="inputUser" value="" disabled="disabled">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-1 control-label">Password</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-5">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox"> Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Request</button>
            </div>
        </form>
    </div>
</div>

&时代；
对话标题
使用者
密码
记得我吗
使用者
密码
记得我吗
取消
添加请求

问题是，在这个过程中的某个地方，它迫使每个项目都换一行，所以我有两个“形式”，它们是垂直渲染的父宽度（有意）的50%（无意）。如何使这两个对象并排渲染？

<div class="span6">

应该是

<div class="col-sm-6">

2次

它需要进一步清理，但这是主要问题。这里有一个可能的改进：

---

不过，我可能会让标签更宽，让手机的所有功能都被屏蔽。

你完全正确。在span6位上失去了内存，忘记了为引导3更改为col-sm-6。即使这样，它也不会并排呈现，但用你的小提琴，效果很好。