Question

我有一个bootstrap 3模态表单，它使用混合表单水平和表单内联类。我已经摆弄了列宽，但似乎无法使表格恰到好处。有两个问题我似乎无法解决：

标签没有正确对齐。
“状态”字段的宽度不正确。

我的Html：

<div class="row">
    <div class="col-md-7">
        <h2>Agents</h2>
    </div>
    <div class="col-md-2">
        <a id="addAgentButton" href="#" class="btn btn-primary">Add Agent</a>
    </div>
</div>

<div id="agentModal" data-bind="with:detailAgent" class="modal fade">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body col-md-12">
                <form role="form" data-bind="submit: save">
                    <div class="form-group col-md-12">
                        <label class="col-md-2 control-label" for="txtAgentName">Name: </label>
                        <div class="col-md-6"><input class="form-control input-sm" id="txtAgentName" type="text" data-bind="value:Name" /></div>
                    </div>
                    <div class="form-group col-md-12">
                        <label class="col-md-2 control-label" for="txtAgentAddressLine1">Address 1: </label>
                        <div class="col-md-6">
                            <input class="form-control input-sm" id="txtAgentAddressLine1" type="text" data-bind="value:Address1" />
                        </div>
                    </div>

                    <div class="form-group col-md-12 form-inline">
                        <label class="col-md-2 control-label" for="txtAgentCity">City: </label>
                        <div class="col-md-2">
                            <input class="form-control input-sm" id="txtAgentCity" type="text" data-bind="value:City" />
                        </div>

                        <label class="col-md-2 control-label" for="txtAgentState">State: </label>
                        <div class="col-md-2">
                            <select class="form-control input-sm" id="txtAgentState" data-bind="options: $root.states, value: State, optionsCaption:'Choose a state...'"></select>
                        </div>

                        <label class="col-md-1 control-label" for="txtAgentZip">Zip: </label>
                        <div class="col-md-2">
                            <input type="tel" class="form-control input-sm" id="txtAgentZip" data-bind="value:Zip" />
                        </div>
                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我的Javascript显示模态：

$("#addAgentButton").on("click", function() {
            $("#agentModal").modal("show");
        });

我的CSS：

.modal-dialog {
  width: 800px;/* your width */
}

#addAgentButton {
    margin-top: 15px;
}

And here's the jsfiddle.

Answer 1

好的，我希望我理解你的正确。看一下这个fiddle

我不得不稍微改变你的内联形式的html部分：

<div class="form-group col-md-12">
    <label class="control-label col-md-2" for="txtAgentCity">City: </label>
    <div class="col-md-2">
        <input class="form-control input-sm" id="txtAgentCity" type="text" data-bind="value:City" />
    </div>

    <label class="col-md-2 control-label text-right" for="txtAgentState">State: </label>
    <div class="col-md-2">
        <select class="form-control input-sm" id="txtAgentState" data-bind="options: $root.states, value: State, optionsCaption:'Choose a state...'"></select>
    </div>

    <label class="col-md-2 control-lntZip text-right">Zip: </label>
    <div class="col-md-2">
        <input type="tel" class="form-control input-sm" id="txtAgentZip" data-bind="value:Zip" />
    </div>
</div>

只需将课程.text-right添加到您想要对齐的label。

Bootstrap模态形式：标签不能正确对齐/获取宽度正确的内嵌部分

1 个答案: