css - Bootstrap 模态形式 : Labels don't right-align/getting widths correct for in-line sections

Question

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

1. 标签没有正确对齐。
2. State 字段的宽度不正确。

我的 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 即可。