Использование входной группы внутри встроенной формы

При добавлении input-group к form-inline, input-group появляется под формой в "новой строке" вместо встроенного с другими элементами управления.

Похоже, что это связано с тем, что класс-оболочка input-group имеет display, установленный в table, тогда как другие входы, которые работают нормально, имеют display для inline-block. Конечно, невозможно отобразить input-group экран inline-block, потому что его дочерний add-on span, который имеет display: table-cell, нуждается в правильности правильного выравнивания родительского элемента.

Итак, мой вопрос: можно ли использовать input-group внутри встроенной формы, используя исключительно классы Bootstrap? Если нет, то какая была бы лучшая работа, позволяющая использовать пользовательские классы.

Вот демон иллюстрирующий мою мысль. Код следующий:

<form action="" class="form-inline">
    <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
    <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>

    <div class="checkbox">
        <label>
            <input type="checkbox" /> and Checkboxes
        </label>
    </div>
    <select class="form-control" style="width: 150px;">
        <option>and Selects</option>
    </select>

    <button type="submit" class="btn btn-default">and Buttons</button>
    <div class="input-group" style="width: 220px;">
        <span class="input-group-addon">BUT</span>
        <input type="text" class="form-control" placeholder="not with input-groups" />
    </div>
</form>

Ответ 1

Это действительно было ошибкой и было разрешено (подробнее о проблеме на github).

Отныне встроенные формы в BootStrap требуют, чтобы элементы управления дочерней формы были .form-group.

Итак, мой код станет:

<form action="" class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
    </div>

    ...
    <div class="form-group">
        <div class="input-group" style="width: 220px;">
            <span class="input-group-addon">BUT</span>
            <input type="text" class="form-control" placeholder="not with input-groups" />
        </div>
    </div>
</form>

Ответ 2

Я думаю, вам может понадобиться разделить форму на столбцы, чтобы получить встроенный макет, который вы хотите. Пример (я думаю, что вы после этого) находится на сайте Bootstrap здесь.

попробуйте поставить

<div class="col-lg-1"></div>

вокруг ваших элементов управления, чтобы понять, что я имею в виду. Вы, конечно, должны работать в столбцах по 12, поэтому это необходимо будет соответствующим образом скорректировать.