Html 将输入字段与选择字段对齐

我正在使用html、java、javascript和css以及bootstrap构建一个web应用程序。下面是该应用程序中给我带来麻烦的一部分：

我想在这里完成的是将这个输入字段移到第一行下面，使其刚好位于第一个选择字段下面。大概是这样的：

顺便说一句，当用户单击+按钮时，新行会自动添加。下面是用html编写的部分：

<div class="row">
    <div class="form-group col-xs-5 formular-element-width-fix">
        <label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
            <%=elementNumber %>:</label>
        <div class="input-group">
            <input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
        </div>
    </div>
    <div class="form-group col-xs-2">
        <select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
            <option value="Textbox" selected>Textbox</option>
            <option value="Checkbox">Checkbox</option>
            <option value="Radio buttons">Radio buttons</option>
        </select>
    </div>
    <div class="form-group col-xs-1 radio-number-hide">
        <select class="form-control width100" onchange="changeRadioLabels(this)">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </div>
    <div class="form-group col-xs-2">
        <select class="form-control width100">
            <option value="None" selected>None</option>
            <option value="Mandatory">Mandatory</option>
            <option value="Numeric">Numeric</option>
            <option value="Email">Email</option>
            <option value="Date">Date</option>
        </select>
    </div>
    <div class="form-group btn-group">
        <button class="btn btn-add-element" onclick="addElement()">&#43;</button>
    </div>
    <div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
        <div class="input-group">
            <input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
        </div>
    </div>

</div>

元素
:
文本框
复选框
单选按钮
1.
2.
3.
4.
5.
没有一个
强制性的
数字的
电子邮件
日期
+

默认情况下，引导在一行中占用12列，如果您尝试使用12列以上的列，它会自动将额外的内容放入下一行。下面是实现结果的代码段：

<div class="row">
    <div class="form-group col-xs-5 formular-element-width-fix">
        <label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
            <%=elementNumber %>:</label>
        <div class="input-group">
            <input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
        </div>
    </div>
    <div class="form-group col-xs-2">
        <select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
            <option value="Textbox" selected>Textbox</option>
            <option value="Checkbox">Checkbox</option>
            <option value="Radio buttons">Radio buttons</option>
        </select>
    </div>
    <div class="form-group col-xs-1 radio-number-hide">
        <select class="form-control width100" onchange="changeRadioLabels(this)">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </div>
    <div class="form-group col-xs-2">
        <select class="form-control width100">
            <option value="None" selected>None</option>
            <option value="Mandatory">Mandatory</option>
            <option value="Numeric">Numeric</option>
            <option value="Email">Email</option>
            <option value="Date">Date</option>
        </select>
    </div>
    <!--here completing 12 columns of first row-->
    <div class="col-xs-2 form-group btn-group"> 
        <button class="btn btn-add-element" onclick="addElement()">&#43;</button>
    </div>
   <!--for next row, leave first 5 columns blank, which correspond to label and 
   textfield, Added css here-->
    <div class="form-group col-xs-5 formular-element-width-fix"> </div>
    <div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
        <div class="input-group">
            <input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
        </div>
    </div>

</div>

元素
:
文本框
复选框
单选按钮
1.
2.
3.
4.
5.
没有一个
强制性的
数字的
电子邮件
日期
+

好的，这是一个很好的答案，但我试过了。例如，当我插入第十个元素时，我遇到了这样的情况：我编辑了代码片段，在第二行的前5列上添加了css类formular element width fix和form group，以完全模仿第一行。请让我知道，如果这起作用：）在我的情况下，答案是实际删除公式元素宽度固定类，现在它起作用了。谢谢你再次给我指出这个答案，因为我之前错过了：-）