Мітка замість лівого поля над полем введення

Я хотів би, щоб мітки були не над полем введення, а зліва.

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

Подобається це

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>

У мене була така ж проблема, ось моє рішення:

<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 є заплутаною. Якщо ви подивитеся на документацію завантажувальної програми, ви побачите, що клас -горизонталь форми насправді є формою з полями один під одним, тобто те, що більшість людей вважають вертикальною формою. Правильним класом для форми, що переходить через сторінку, є форма-вкладка . Вони , ймовірно , ввів термін інлайн , тому що вони вже неправильно термін горизонталь .

З деяких відповідей ви бачите, що деякі люди використовують обидва ці класи в одній формі! Інші вважають, що їм потрібна форма-горизонталь, коли вони дійсно хочуть форми-вставки .

Я пропоную зробити це саме так, як описано в документації 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-горизонтальну форму до цього. поводяться як рядки сітки, тому немає потреби в .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/

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