Question

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

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

因此，使用Bootstrap 3文档中的模态对话框示例与Bootstrap 3文档中的表单水平示例相结合以及使用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>

http://jsfiddle.net/isherwood/3zeMh/

问题在于沿途的某个地方，它迫使每个项目走新线，所以我有两个“形式”，它们是垂直渲染（非故意）的父宽度（有意）的50％。如何将两个渲染并排？

Answer 1

<div class="span6">

应该是

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

2次。

http://jsfiddle.net/isherwood/3zeMh/4

需要进一步清理，但这是主要问题。这是一个可能的改进：http://jsfiddle.net/isherwood/3zeMh/6

我可能会使标签更宽，并保持一切阻止移动，

具有水平形式，并排组的模态对话框

1 个答案: