Question

我想知道是否有任何方法可以证明带有引导程序的内联表单？我有一个包含多行控件（表单组）的表单，并且希望它们都在同一个地方结束，而不管每行中有多少控件。有没有办法做到这一点？

表格：

     <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>

这是小提琴： https://jsfiddle.net/7abpdxpb/2/

这是一个更新的小提琴，通过％widths以一种丑陋的方式来做：https://jsfiddle.net/7abpdxpb/3/

我真的不愿意这样做，因为它延伸了输入的标签，而且我也不确定这会对重新调整尺寸和所有这些做出反应......

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/

使用Bootstrap证明内联表单

1 个答案: