使用Bootstrap以混合形式 - 内联和水平样式排列字段

Question

我有一个带有一些表格内联部分的表单，如下面的图像和演示中所示。

问题：我希望字段行在右边排成一行，就像在左边一样。我无法确定限制他们（首先，最后，电子邮件，确认电子邮件）宽度的限制或如何让他们使用整个空间。

注意：我在没有解决此特定问题的情况下审核了许多问题。例如。 bootstrap form group, mixed inline and horizontal style。其他例子。

演示： http://plnkr.co/edit/ImNP7IftPdk3sBDmJewe?p=preview

    <div class="col-md-12">
        <div class="form-group">
            <div class="row">
                <div class="col-md-6">
                    <label class="control-label" for="first_name">Name</label>
                    <div class="form-inline form-group">
                        <input id="first_name" type="text" class="contactInput form-control" name="first_name" placeholder="First">
                        <input id="last_name" type="text" class="contactInput form-control" name="last_name" placeholder="Last">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <label for="email">Email</label>
                    <div class="form-inline form-group">
                        <input id="email" type="email" class="contactInput form-control"  name="email" placeholder="Email">
                        <input id="confirm_email" type="email" class="contactInput form-control"  name="confirm_email" placeholder="Confirm Email">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="phone_number">Phone</label>
                        <input id="phone_number" type="phoneUS" class="contactInput form-control" name="phone_number"  placeholder="##########"  maxlength="10">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="address_1">Address 1</label>
                        <input id="address_1" type="text" class="contactInput form-control" name="address_1">
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

解决方案实际上不是将表单内联混合到CSS形式中。相反，使用列。事实上对我来说似乎相当明显，但希望有人磕磕绊绊会发现这个答案很有用。

解决方案演示：http://plnkr.co/edit/ImNP7IftPdk3sBDmJewe?p=preview

        <div class="col-md-12">
            <div class="row">
                <div class="col-xs-6">
                  <div class="form-group">
                      <label class="control-label" for="first_name">Name</label>
                        <input id="first_name" type="text" class="contactInput form-control" name="first_name" placeholder="First">
                  </div>
              </div>
                <div class="col-xs-6">
                  <div class="form-group">
                      <label class="control-label" for="last_name">&nbsp;</label>
                     <input id="last_name" type="text" class="contactInput form-control" name="last_name" placeholder="Last">
                  </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                  <div class="form-group">
                      <label class="control-label" for="email">Email</label>
                        <input id="email" type="text" class="contactInput form-control" name="email" placeholder="Email">
                  </div>
              </div>
                <div class="col-xs-6">
                  <div class="form-group">
                      <label class="control-label" for="email_confrim">&nbsp;</label>
                     <input id="email_confrim" type="text" class="contactInput form-control" name="email_confrim" placeholder="Confirm Email">
                  </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="phone_number">Phone</label>
                        <input id="phone_number" type="phoneUS" class="contactInput form-control" name="phone_number"  placeholder="##########"  maxlength="10">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="address_1">Address 1</label>
                        <input id="address_1" type="text" class="contactInput form-control" name="address_1">
                    </div>
                </div>
            </div>
    </div>