Создайте встроенную форму с бутстрапом входных групп

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

Мой код:

<form class="form-inline" role="form">
    <div class="form-group">    
        <div class="input-group">                       
            <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
            <input type="email" class="form-control" placeholder="Enter email"/>
        </div>
    </div>

    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
            <input type="password" class="form-control" placeholder="Choose password"/>
        </div>
    </div>                          

    <button type="submit" class="btn btn-default">Create account</button>
</form>

Ответ 1

Я сделал это так:

<form class="form-inline" role="form">
<div class="row">
    <div class="form-group col-sm-3">
        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>

            <input type="email" class="form-control" placeholder="Enter email" />
        </div>
    </div>
    <div class="form-group col-sm-3">
        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>

            <input type="password" class="form-control" placeholder="Choose password" />
        </div>
    </div>
    <button type="submit" class="btn btn-default">Create account</button>
</div>

http://jsfiddle.net/n5qmc/

Ответ 2

Это известная проблема и будет исправлена в Bootstrap v.3.2.0 в соответствии с этим списком кораблей.

До этого вы можете исправить это самостоятельно:

.input-group {
    display: inline-table;
    vertical-align: middle;

    .input-group-addon,
    .input-group-btn,
    .form-control {
        width: auto !important;
    }
}

Ответ 3

Взято из Bootstrap Docs

Использовать предопределенные классы сетки Bootstrap для выравнивания меток и групп элементов управления форматом в горизонтальной компоновке путем добавления .form-horizontal к форме. Это приводит к изменению .form-group, чтобы вести себя как строки сетки, поэтому нет необходимости в .row. Я также добавил семантические атрибуты для меток, которые вы всегда должны использовать на каждом входе (используйте .sr-only, чтобы скрыть ярлыки, если это необходимо). Это делает форму не встроенной, а горизонтальной.

<form class="form-horizontal" role="form">
       <div class="form-group">
          <label for="email" class="sr-only">Email</label>
          <div class="input-group col-sm-3"> 
              <span class="input-group-addon">
                  <i class="fa fa-envelope-o fa-fw"></i>
              </span>                            
              <input type="email" id="email" name="email" class="form-control" placeholder="Enter email" />
        </div>
        <div class="form-group">
            <label for="password" class="sr-only">Password</label>
            <div class="input-group col-sm-3"> 
                <span class="input-group-addon">
                    <i class="fa fa-key fa-fw"></i>
                </span>
                <input type="password" id="password" name="password" class="form-control" placeholder="Choose password" />
            </div>  
        </div>
        <button type="submit" class="btn btn-default">Create account</button>
</form>

Ответ 4

Не уверен, что это полезно, но я думал, что отправлю, поскольку я не видел этого в другом месте. Я пытался получить встроенную форму с встроенными ярлыками и надстройкой, используя Bootstrap v3. Вот код, который работал у меня. Я использовал систему сетки в divs для размещения метки и группы ввода и надстройки внутри элемента сетки.

       <div class="form-group">
        <div class="col-sm-2">
          <label class="control-label" for="input_one">Label Text</label>
        </div>
        <div class="col-sm-10">
          <div class="input-group">
            <input class="form-control" placeholder="Placeholder Text" type="text" name="input_one" id="input_one">
            <span class="input-group-addon">Add on text</span>
          </div>
        </div>
      </div>