css - 使用 Bootstrap 对齐内联表单

Question

我想知道是否有任何方法可以证明带有 Bootstrap 的内联表单是合理的？我有一个包含多行控件(表单组)的表单，并且希望它们都在同一位置结束，而不管每行中有多少个控件。有办法做到这一点吗？

形式:

     <div class="panel panel-body" data-bind="foreach: Contract">
        <div class="form-inline panel">
            <div class="input-group input-group-sm">
                <span class="input-group-addon">First Name</span>
                <input type="text" class="form-control" placeholder="First Name" title="First Name" />
            </div>
            <div class="input-group input-group-sm">
                <span class="input-group-addon">Last Name</span>
                <input type="text" class="form-control" placeholder="Last Name" title="Last Name" />
            </div>
        </div>
        <div class="input-group input-group-sm panel">
            <span class="input-group-addon">Address</span>
            <input type="text" class="form-control" placeholder="Address" title="Address" />
        </div>
        <div class="form-inline panel">
            <div class="input-group input-group-sm">
                <span class="input-group-addon">City</span>
                <input type="text" class="form-control" placeholder="City" title="City" />
            </div>
            <div class="input-group input-group-sm">
                <span class="input-group-addon">State</span>
                <select placeholder="State" title="State" class="form-control"></select>
            </div>
            <div class="input-group input-group-sm">
                <span class="input-group-addon">Zip</span>
                <input type="text" class="form-control" placeholder="Zip Code" title="Zip Code" />
            </div>
        </div>
        <div class="input-group input-group-sm panel">
            <span class="input-group-addon">Total $</span>
            <input type="text" class="form-control" placeholder="Total" title="Total">
            <span class="input-group-addon">.00</span>
        </div>
    </div>

这是 fiddle : https://jsfiddle.net/7abpdxpb/2/

这是一个更新的 fiddle ，通过 % widths 以一种丑陋的方式做到这一点:https://jsfiddle.net/7abpdxpb/3/

我真的不想这样做，因为它会拉长输入的标签，而且我不确定这会对重新调整大小和所有这些有何 react ......

Answer 1

您可以使用 Bootstrap 列:

<div class="panel panel-body" data-bind="foreach: Contract">
    <div class="">
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group input-group-sm form-inline panel">
                    <span class="input-group-addon">First Name</span>
                    <input type="text" class="form-control" placeholder="First Name" title="First Name" />
                </div>
            </div>
            <div class="col-sm-6">
                    <div class="input-group input-group-sm form-inline panel">
                        <span class="input-group-addon">Last Name</span>
                        <input type="text" class="form-control" placeholder="Last Name" title="Last Name" />
                    </div>
                </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="input-group input-group-sm panel">
                <span class="input-group-addon">Address</span>
                <input type="text" class="form-control" placeholder="Address" title="Address" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-inline panel">
            <div class="col-sm-4">
                <div class="input-group input-group-sm form-inline panel">
                    <span class="input-group-addon">City</span>
                    <input type="text" class="form-control" placeholder="City" title="City" />
                </div>
            </div>
            <div class="col-sm-4">
                <div class="input-group input-group-sm form-inline panel">
                    <span class="input-group-addon">State</span>
                    <select placeholder="State" title="State" class="form-control"></select>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="input-group input-group-sm form-inline panel">
                    <span class="input-group-addon">Zip</span>
                    <input type="text" class="form-control" placeholder="Zip Code" title="Zip Code" />
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="input-group input-group-sm panel">
                <span class="input-group-addon">Total $</span>
                <input type="text" class="form-control" placeholder="Total" title="Total">
                <span class="input-group-addon">.00</span>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/debraj/2jo069mt/21/