使用Bootstrap混合表单内联和水平样式来填充字段

Question

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

问题：我希望字段行在右侧对齐，就像它们在左侧那样。我无法确定是什么限制了它们（第一，最后，电子邮件，确认电子邮件）的宽度或如何使它们使用全部空间。

注意：我已经复习了许多问题，但没有解决此特定问题。例如。引导程序形式组，混合内联和水平样式。在其他示例中。

演示：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

解决方案实际上是不将form-inline混入form 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>