如何让表单控件扩展到fieldset?

时间:2015-06-05 02:13:56

标签: html twitter-bootstrap

我很难弄清楚如何弄清楚如何使我的联系表单控件与我的工作表单控件的边缘相匹配。我仍然是Bootstrap的新手,不知道我做错了什么或如何解决问题。我需要我的联系人和电子邮件表单控件一直到我的工作表单控件的边缘。

这是一个更好解释的屏幕。如您所见,我的布局在联系人字段集中已关闭 Explanation

这是我的标记

<div class="col-md-12">
<div class="col-lg-6">
    <form>
        <fieldset>
            <legend>Add Customer</legend>
            <div class="form-horizontal">
                <div class="container col-md-12">
                    <div class="form-group">
                        <label for="txtCustomer" class="control-label col-md-2">Customer</label>
                        <div class="col-md-10">
                            <input id="txtCustomer" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtAddress1" class="control-label col-md-2">Address</label>
                        <div class="col-md-10">
                            <input id="txtAddress1" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtAddress2" class="control-label col-md-2">Address2</label>
                        <div class="col-md-10">
                            <input id="txtAddress2" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtCity" class="control-label col-md-2">City</label>
                        <div class="col-md-10">
                            <input id="txtCity" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtState" class="control-label col-md-2">State</label>
                        <div class="col-md-2">
                            <input id="txtState" type="text" class="form-control" />
                        </div>
                        <label for="txtZip" class="control-label col-md-2">Zip/Postal</label>
                        <div class="col-md-3">
                            <input id="txtZip" type="text" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>

        </fieldset>
    </form>
</div>
<div class="col-lg-6">
    <div class="form-horizontal">
        <div class="container col-md-12">
            <form>
                <fieldset>
                    <legend>Contact</legend>

                    <div class="form-group">
                        <label for="txtContactName" class="control-label col-md-2">Contact</label>
                        <div class="col-md-10 RemovingPadding">
                            <input id="txtContactName" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtEmail" class="control-label col-md-2">Email</label>
                        <div class="col-md-10">
                            <input id="txtEmail" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtPhone" class="control-label col-md-2">Phone</label>
                        <div class="col-md-4">
                            <input id="txtPhone" type="text" class="form-control" />
                        </div>
                        <label for="txtWork" class="control-label col-md-2">Work</label>
                        <div class="col-md-4">
                            <input id="txtWork" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtMobile" class="control-label col-md-2">Mobile</label>
                        <div class="col-md-4">
                            <input id="txtMobile" type="text" class="form-control" />
                        </div>
                        <label for="txtFax" class="control-label col-md-2">Fax</label>
                        <div class="col-md-4">
                            <input id="txtFax" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtOther" class="control-label col-md-2">Other</label>
                        <div class="col-md-4">
                            <input id="txtOther" type="text" class="form-control" />
                        </div>
                        <label for="txtOther2" class="control-label col-md-2">Other 2</label>
                        <div class="col-md-4">
                            <input id="txtOther2" type="text" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtOther3" class="control-label col-md-2">Other 3</label>
                        <div class="col-md-4">
                            <input id="txtOther3" type="text" class="form-control" />
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

0 个答案:

没有答案