texto - input html atributos

Usar input-group dentro de una forma en línea

Question

Al agregar un input-group a un form-inline , el input-group aparece debajo del formulario en una "nueva línea" en lugar de en línea con los otros controles.

Parece que esto se debe a que la clase contenedora del input-group tiene la display configurada en la table mientras que las otras entradas, que funcionan bien, tienen su display configurada inline-block en inline-block . Por supuesto, no es posible dar al input-group la visualización de inline-block porque su extensión de add-on hijo, que tiene display: table-cell , necesita la propiedad del elemento principal para alinearse correctamente.

Entonces mi pregunta es: ¿ es posible usar input-group dentro de un formulario en línea usando exclusivamente clases Bootstrap ? De lo contrario, ¿cuál sería la mejor solución para permitir el uso de clases personalizadas ?

Aquí hay una demo ilustra mi punto. El código es el siguiente:

<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>

Answer 1

Creo que puede necesitar separar su formulario en columnas para obtener el diseño en línea que desea. Un ejemplo (pienso en lo que está buscando) está en el sitio de Bootstrap here .

intenta poner

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

alrededor de tus controles para ver a qué me refiero. Por supuesto, debe trabajar en columnas de 12, por lo que deberá ajustarlas en consecuencia.

Answer 2

Esto fue de hecho un error y se resolvió (verifique el problema en github para obtener más información).

A partir de ahora, los formularios en línea en BootStrap requieren envolver los controles de formulario secundarios con .form-group .

Entonces mi código se convertiría en:

<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>