Выравнивание поля ввода с полем выбора

Question

Я создаю веб-приложение, используя html, java, javascript и css с начальной загрузкой.Вот одна часть этого приложения, которая доставляет мне неприятности:

Я пытаюсь выполнить это поле ввода ниже первогострока должна быть только ниже первого поля выбора.Примерно так:

Кстати, новые строки добавляются динамически, когда пользователь нажимает кнопку +.А теперь вот этот раздел, написанный на 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>