2列并排形式不是内联的

Question

我有一个表格，我想要在2列，第一列有第1列的表格，然后是第2列的第二部分，所以没有严格的内联。我得到的结果是一个很大的形式我希望表单能够克隆到ALM的第一批字段。基本上检查它的合作伙伴可以输入他们的联合应用程序的详细信息，所以需要地址名称和所有排队

 <asp:UpdatePanel ID="uptPanelPersonalDetails" runat="server"><ContentTemplate>
        <fieldset>
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Is Joint Application</label>

                <div class="col-md-8">
                    <label class="checkbox">
                        &nbsp;&nbsp;<telerik:RadCheckBox AutoPostBack="true" OnCheckedChanged="chkIsJointApplication_CheckedChanged" Skin="Bootstrap" ID="chkIsJointApplication" runat="server"></telerik:RadCheckBox>
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">IVA Code</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtIVACode" CssClass="form-control" Width="20%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">
                    First Name</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtFirstName" CssClass="form-control" Width="60%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Middle Name</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtMiddle" CssClass="form-control" Width="20%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">
                    Surname</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtSurname" CssClass="form-control" Width="60%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Saluatation</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="rdSaluation" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Ailases</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtAilases" CssClass="form-control" Width="40%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Marital Status</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="rdMartialStatus" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Introducer Name</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="txtIntroducerName" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Address Line 1</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtAddressLine1" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Address Line 2</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtAddressLine2" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">City</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtCity" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Post Code</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtPostCode" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">County</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="dpCounty" CssClass="form-group-lg" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Country</label>
                <div class="col-md-8">

                    <telerik:RadComboBox ID="dpCountry" Width="50%" CssClass="form-group-lg" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Date Of Birth</label>
                <div class="col-md-8">
                    <telerik:RadDatePicker ID="rdDob" Skin="Bootstrap" runat="server"></telerik:RadDatePicker>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Age</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtAge" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Home Tel NO.</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtHomeTelNo" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Work Tel No</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtWorkTelNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Fax No</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtFaxNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Mobile No</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtMobileNo" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Best Time to Call</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtBestTimeToCall" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Prefered Contact Method</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="rdPreferedContactMethod" Width="50%" CssClass="form-group-lg" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>
               <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Best Time to Call</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="txtEmail" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
                </div>
            </div>


              <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Gender</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="rdGender" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>

                </div>
            </div>

            </fieldset>
           <fieldset>
             <asp:Panel ID="pnlPartnerDetails" runat="server" Visible="true">
                Partner Details

            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">
                    First Name</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox1" CssClass="form-control" Width="60%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Middle Name</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox2" CssClass="form-control" Width="20%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">
                    Surname</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox3" CssClass="form-control" Width="60%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Saluatation</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="RadComboBox1" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Ailases</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox4" CssClass="form-control" Width="40%" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Marital Status</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="RadComboBox2" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Introducer Name</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="RadComboBox3" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Address Line 1</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox5" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Address Line 2</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox6" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">City</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox7" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Post Code</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox8" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">County</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="RadComboBox4" CssClass="form-group-lg" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Country</label>
                <div class="col-md-8">

                    <telerik:RadComboBox ID="RadComboBox5" Width="50%" CssClass="form-group-lg" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Date Of Birth</label>
                <div class="col-md-8">
                    <telerik:RadDatePicker ID="RadDatePicker1" Skin="Bootstrap" runat="server"></telerik:RadDatePicker>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Age</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox9" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Home Tel NO.</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox10" CssClass="form-group-lg" Skin="Bootstrap" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Work Tel No</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox11" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Fax No</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox12" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Mobile No</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox13" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Best Time to Call</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox14" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Prefered Contact Method</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="RadComboBox6" Width="50%" CssClass="form-group-lg" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>
                </div>
            </div>
               <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Best Time to Call</label>
                <div class="col-md-8">
                    <telerik:RadTextBox ID="RadTextBox15" CssClass="form-group-lg" runat="server"></telerik:RadTextBox>
                </div>
            </div>


              <div class="form-group">
                <label class="col-md-4 control-label" for="textinput">Gender</label>
                <div class="col-md-8">
                    <telerik:RadComboBox ID="RadComboBox7" Width="50%" Skin="Bootstrap" EmptyMessage="Please Select" runat="server"></telerik:RadComboBox>

                </div>
</div>

Answer 1

我喜欢在创建多列表单时使用Offset。下面是一个使用bootstrap的示例，其中前2列中有标签，下4列中有一个字段，第7列和第8列中有标签，第9-12列中有字段

<div class="row">
        <label class="col-sm-2" for="intIncidentID">Incident ID</label>
        <div class="col-sm-4">
            <telerik:RadTextBox ID="txtIncidentID" runat="server" ReadOnly="true"></telerik:RadTextBox>
        </div>
        <label class="col-sm-2 offset-6" for="intShip">Ship</label>
        <div class="col-sm-4 offset-8">
            <telerik:RadComboBox ID="intShip" runat="server" Width="100%"></telerik:RadComboBox>
        </div>
    </div>