Обозначение с левой стороны вместо поля ввода

Ответ 1

Поместите <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>

Ответ 2

Вы можете использовать класс 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>

Ответ 3

Документация Bootstrap 3 рассказывает об этом на вкладке "Документация по CSS" в разделе "Требуется пользовательская ширина", в котором говорится:

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

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

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

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

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

Ответ 4

Подобно этому

DEMO

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>

Ответ 5

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

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

Ответ 6

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

<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="[email protected]"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

вот Демо

Ответ 7

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

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

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

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

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

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

Ответ 8

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

Из некоторых ответов здесь видно, что некоторые люди используют оба этих класса в одной форме! Другие считают, что им нужна форма-горизонтальная, когда они действительно хотят 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>

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

Ответ 9

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

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

Ответ 10

Я думаю, что это то, что вы хотите, из документа начальной загрузки "Горизонтальная форма Используйте предустановленные классы сетки Bootstrap для выравнивания меток и групп элементов управления формой в горизонтальном макете путем добавления формы к горизонтальной форме. Это меняет .form-группы, чтобы вести себя как строки сетки, поэтому нет необходимости в .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>

Fiddle: http://jsfiddle.net/beewayne/B9jj2/29/

Ответ 11

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

Что мой 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: Я тоже начинающий, про дизайнеры... не стесняйтесь делиться своими отзывами.

Ответ 12

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

Ответ 13

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

Ответ 14

Вы можете использовать тег 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>