Ярлык начальной загрузки рядом с вводом

Я пытаюсь поставить рядом с ним ярлык поля ввода, а не над ним, используя bootstrap. Обертка этого в form-horizontal работает, но это не фактически в форме (просто вызов ajax, который читает значение). Есть ли способ просто переместить ярлык в левую часть ввода?

    <div class="controls-row">
        <div class="control-group">
            <label class="control-label" for="my-number">ALabel</label>

            <div class="controls">
                <input id="my-number" type="number"/>
            </div>
        </div>
    </div>

Скрипка находится на http://jsfiddle.net/7VmR9/

Ответ 1

Да, вы можете сделать это с помощью структуры столбцов bootstrap.

<div class="form-group">
  <label for="name" class="col-lg-4">Name:</label>
    <div class="col-lg-8">
      <input type="text" class="form-control" name="name" id="name">
    </div>
</div>

Вот пример Bootply

Ответ 2

div - это элемент block, что означает, что он будет занимать как можно больше ширины, а элемент input находится в нем.

Если вы хотите, чтобы label находился рядом с элементом input: либо поместите label в div, либо создайте элемент div a inline-block.

Ответ 3

Вы можете получить помощь непосредственно с сайта, который они предоставили, хорошо документированы.

Вот Fiddle with Bootstrap css.

<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
  <input type="text" id="inputEmail" placeholder="Email">
</div>

Ответ 4

<form class="form-inline">
    <div class="form-group">
        <label for="my-number">ALabel</label>
        <input type="number" id="my-number" class="form-control">
    </div>
</form>

Источник: https://getbootstrap.com/docs/3.3/css/#forms-inline