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

105

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

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

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

Code_Result_Bootstrap_3_Label

Я бы хотел:

Desired_Result_Bootstrap_3_Label

css twitter-bootstrap-3 Стефан Фогт
источник

Ответы:

86

Вы можете использовать класс 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>
Мартин Сиснерос Капистран
источник
Спасибо. После метки у меня была группа ввода div, которая по умолчанию имеет ширину: 100%. Требуется переопределить этот div до 50%. Тогда метка и группа ввода (datepicker) поместятся в одну строку. (Хотелось бы, чтобы он был чище без переопределения.)
Турбо
2
Нет, вам не нужно его отменять. Просто попробуйте параметры сетки, такие как «row» и «col- *».
gvgramazio
1
Это должен быть принятый ответ. Это демонстрирует form-groupвозможность наследования form-inlineдля создания встроенных отдельных групп форм вместо родительского класса формы.
Cowbert
Примечание: в моем случае мне нужно было поместить INPUT в DIV
AlexNikonov
56

Положите <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>
Candu
источник
забавно, это работает, но документация по начальной загрузке этого не показывает. Он показывает ярлык в группе форм
steveareeno
14

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

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

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

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

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

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

корпорация
источник
2
как насчет, скажем, сделать ширину меток col-sm-2 - а входы col-sm-10?
niico
13

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

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

Alex
источник
Решение 1 у меня не работает. Ярлык все еще находится над элементом управления вводом. Решение Candu делает то, что я хочу, но правильно ли это?
Кит Фисто
8

Как это

ДЕМО

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>
Фалгуни Панчал
источник
4
Это решение для Bootstrap v2.1.0, но не для Bootstrap v3.0.0
Стефан Фогт
3
"form-inline" также существует в Bootstrap 3, и я думаю, что это ключ: +1
Per Quested Aronsson
7

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

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

вот демо

Амир
источник
5

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

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

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

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

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

.form-group label { line-height:--px; }
psd2htmldepot
источник
5

Из существующих ответов видно, что терминология 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>

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

введите описание изображения здесь

paulo62
источник
7
Скопируйте и вставьте свой код, я получаю метку имени над вводом текста с помощью Bootstrap 3.3.4.
Майк Ковингтон
2

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

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

.form-inline .form-group input {
 width: auto; 
}
Том С
источник
Это не то, как вы должны использовать бутстрап. Я предлагаю вам использовать классы, созданные для ваших нужд, вместо того, чтобы изменять существующие.
gvgramazio
Да, я согласен, я написал это, когда был новичком во всей сцене Bootstrap.
Tom C
1

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

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

Баладжи
источник
1

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

BeeTee2
источник
6
Your fiddle 404'd
Майк Ковингтон
0 
<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>
user2349320
источник
2
class = "control-group" не существует в Boostrap V3
Стефан Фогт
0

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>
Развернуть фрагмент

Сародж Шреста
источник