Я создаю форму в Bootstrap и хочу, чтобы в одной строке и в одном столбце было 2 входа, один рядом с другим.
Я пробовал с классом input-group
, с помощью которого я смог добавить кнопки и метки на входы, но когда я помещаю 2 входа внутри одного, input-group
второй вход идет ниже первого, и я хочу, чтобы он был рядом с первым и приклеивался, как это происходит с input-group-addon
.
Как этого можно достичь? Где возможно, используя собственные классы Bootstrap.
Это то, что у меня есть до сих пор
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="">Nro. remito</label>
<div class="input-group">
<input name="remitosucursal" id="remitosucursal" type="text" required class="form-control">
<input name="remitonumero" id="remitonumero" type="text" required class="form-control">
</div>
</div>
</div>
Одним из вариантов было бы добавить
input-group-addon
между полями и позволить Bootstrap позаботиться о стиле.Другой вариант, если вы не хотите добавлять
input-group-addon
, - это создать свои собственные стили (хотя я не знаю, хотите ли вы этого из того, что вы говорите в вопросе). Вот пример:Лично мне легче приспособиться, думая о столбцах в двенадцать,
Одним из вариантов является использование встроенных форм .
Я изменил пример, который вы включили в свой вопрос, для использования
Inline forms
(в предварительном просмотре вы увидите, что он отображается в одном столбце, потому что это значение по умолчаниюExtra Small
, но его можно настроить, если вы хотите, чтобы поля располагались горизонтально даже на такой размер):Я оставляю вам эту альтернативу, надеюсь, она сработает для вас:
Если текстовые поля расположены рядом друг с другом, они будут размещены в одной строке, но не в одном столбце.
Вы заметите, что я помещаю каждый
input
вdiv
другое место, обозначаяcol-*-6
, я определяю 6, чтобы указать 12 столбцов таблицыgrid system
.bootstrap
В предыдущем примере я предложил решение, которое показалось мне лучшим.
Входная группа - два входа близко друг к другу
Но это правда, что с
input-group-addon
его помощью вы можете поместить текст рядом с элементом управления, но я видел это больше, чем что-либо, чтобы поместить текст (именно поэтому он применяется вspan
), а не для выравнивания другого элемента управленияЧто также может помочь вам и короче:
чтобы иметь возможность поместить два входа в одну строку