Ярлык слева, а не над полем ввода

Я бы хотел, чтобы метки располагались не над полем ввода, а слева.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

Этот код дает мне:

Я бы хотел:

Вы можете использовать класс form-inline для каждой группы форм :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

Положите <label>снаружи form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

В документации Bootstrap 3 об этом говорится на вкладке документации CSS в разделе «Требуется нестандартная ширина», в котором говорится:

По умолчанию в Bootstrap ширина полей ввода, выбора и текстовых полей составляет 100%. Чтобы использовать встроенную форму, вам нужно установить ширину элементов управления формы, используемых внутри.

Если вы используете свой браузер и инструменты Firebug или Chrome для подавления или уменьшения стиля «ширина», вы должны увидеть, как все выстраивается так, как вы хотите. Ясно, что затем вы можете создать соответствующий CSS, чтобы исправить проблему.

Однако мне кажется странным, что мне вообще нужно это делать. Я не мог не чувствовать, что эта манипуляция раздражает и в долгосрочной перспективе может привести к ошибкам. В конце концов, я использовал фиктивный класс и немного JS, чтобы глобально объединить все мои встроенные входы. Это было небольшое количество случаев, так что особой озабоченности не было.

Тем не менее, я тоже хотел бы услышать от кого-то, у кого есть «правильное» решение, и который может устранить мою прокладку / хак.

Надеюсь, это поможет и станет вам опорой за то, что вы не взорвали прокладку всем людям, которые проигнорировали ваш запрос как проблему с Bootstrap 3.

Вы можете создать такую ​​форму, в которой метка и элемент управления формы находятся на стороне, используя два метода:

1. Макет встроенной формы

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. Горизонтальная компоновка формы

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

Вы можете проверить эту страницу для получения дополнительной информации и живой демонстрации - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Как это

ДЕМО

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

У меня была такая же проблема, вот мое решение:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

вот демо

Вы должны оставить все элементы таким образом:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

дать некоторый запас нужным элементам:

 .form-group { margin-right:5px }

и установите для метки ту же высоту строки, что и высоту полей:

.form-group label { line-height:--px; }

Из существующих ответов видно, что терминология Bootstrap сбивает с толку. Если вы посмотрите документацию по начальной загрузке, вы увидите, что класс form-horizontal фактически предназначен для формы с полями, расположенными ниже друг друга, то есть то, что большинство людей считают вертикальной формой. Правильный класс для формы, проходящей через страницу, - это form-inline . Вероятно, они ввели термин « встроенный», потому что уже неправильно использовали термин « горизонтальный» .

Из некоторых ответов вы видите, что некоторые люди используют оба этих класса в одной форме! Другие думают, что им нужна горизонтальная форма, хотя на самом деле они хотят встроенной формы .

Предлагаю сделать именно так, как описано в документации Bootstrap:

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

Что производит:

Вы можете использовать тег span внутри метки

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>

Мне удалось исправить проблему с. Кажется, работает нормально, и это означает, что мне не нужно вручную добавлять ширину ко всем моим входам.

.form-inline .form-group input {
 width: auto; 
}

Я уверен, что вы уже нашли свой ответ ... вот решение, которое я получил.

Это мой CSS.

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

А мой HTML ...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

Здесь вы можете увидеть рабочий пример ... http://jsfiddle.net/s6Ujm/

PS: Я тоже новичок, профессиональные дизайнеры ... не стесняйтесь делиться своими отзывами.

Я думаю, что это то, что вы хотите, из документации начальной загрузки «Горизонтальная форма. Используйте предопределенные классы сетки Bootstrap для выравнивания меток и групп элементов управления формы в горизонтальной компоновке, добавляя .form-horizontal к форме. Это изменяет .form-groups на ведут себя как строки сетки, поэтому нет необходимости в .row ". Так:

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>
</form>

Сценарий: http://jsfiddle.net/beewayne/B9jj2/29/

<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

Также мы можем использовать это просто как

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

Кажется, что добавление style="width:inherit;"к входам работает нормально. демонстрация jsfiddle

CSS не требуется. Это должно хорошо выглядеть на вашей странице. Вы можете установить col-md-*в соответствии с вашими потребностями

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>