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

Question

我正在使用带有引导程序的html，java，javascript和css构建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>

Answer 1

默认情况下，引导程序在一行中占用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>