Bootstrap 3.0: Як розмістити текст і введення в одному рядку?

Зараз я переходжу свій веб-сайт на Bootstrap 3.0. У мене проблема з введенням форми та форматуванням тексту. Те, що працювало в Bootstrap 2, не працює в Bootstrap 3.

Як я можу отримати текст в одному рядку до і після введення форми? Я звузив це до проблеми з класом 'form-control' у версії Bootstrap 3 прикладу.

Як би я розпочав отримувати весь текст і введення в один рядок? Я хотів би, щоб приклад bootstrap 3 виглядав як приклад bootstrap 2 у jsfiddle.

Приклад скрипки JS

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

Оновлення: Я міняю код на такий, який працює, але зараз у мене проблеми з вирівнюванням. Будь-які ідеї?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Я б розмістив кожен елемент, який ви хочете, вбудований, в окремий col-md- * div у вашому рядку. Або змусіть ваші елементи відображатись вбудовано. Клас керування формою відображає блок, оскільки саме так bootstrap вважає, що це слід зробити.

Прямо з документації http://getbootstrap.com/css/#forms-horizontal .

Використовуйте попередньо визначені класи сітки Bootstrap для вирівнювання міток та груп елементів керування формою в горизонтальному макеті, додаючи .form-horizontalдо форми (яка не обов’язково повинна бути a <form>). Це змінює .form-groupsповедінку як рядки сітки, тому немає необхідності .row.

Зразок:

<form class="form-horizontal">
  <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>

Вам потрібен .form-inlineклас. Однак потрібно бути обережним, з новим .form.inlineкласом потрібно вказати ширину для кожного елемента керування.

Погляньте на це

Жодне з них не працювало для мене, мені довелося користуватися .form-control-staticкласом.

http://getbootstrap.com/css/#forms-controls-static

Ви можете зробити це так:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

Скрипка

просто дайте матері div "class =" col-lg-12 ""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

це буде

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

Я вирішив це, просто додавши заміну для всіх моїх текстових полів на головному css мого сайту, так:

.form-control {
    display:initial !important;
}

всі, будь ласка, перевірте оновлений код, як ми маємо використовувати

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

спасибі з повагою

У Bootstrap 4 для горизонтального елемента ви можете використовувати .rowз .col-*-*класами, щоб вказати ширину міток та елементів керування. дивіться це посилання .

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

Або ви можете зробити це:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

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

Так, я знаю, що це проти того, що таке bootstrap. І ви НІКОЛИ не повинні користуватися таблицею. Тому що DIV набагато кращий за таблиці. Але проблема в тому, що таблиці, рядки та комірки насправді ПРАЦЮЮТЬ.

ТАК - Я ДЕЙСТВОРНО знаю, що існують фанатики CSS, і реакція поштовху коліном ніколи не застосовується TABLE, TR та TD. Так, я знаю, що DIV class = "table" з DIV class = "row" і DIV class = "cell" набагато кращий. За винятком випадків, коли це не працює, і випадків буває багато. Я не вірю, що люди повинні сліпо ігнорувати ці ситуації. Бувають випадки, коли TABLE / TR / TD буде працювати нормально, і немає причин застосовувати більш складний та більш крихкий підхід лише тому, що він вважається більш елегантним. Розробник повинен розуміти, в чому переваги різних підходів та компроміси, і немає абсолютного правила, що DIV є кращими.

"Приклад - на основі цього обговорення я перетворив декілька існуючих tds і trs на div. 45 хвилин возився з цим, намагаючись змусити все вишикуватися поряд, і я здався. TDs повернувся через 10 секунд - працює - відразу - у всіх браузерах, нічого більше робити. Будь ласка, спробуйте дати мені зрозуміти - яке можливе виправдання у вас є для того, щоб я хотів зробити це по-іншому! " Див. [ Https://stackoverflow.com/a/4278073/1758051]

І це: "

Макет повинен бути легким. Той факт, що є статті, написані про те, як досягти динамічного макета з трьох стовпців за допомогою верхнього та нижнього колонтитула в CSS, показує, що це погана система макетування. Звичайно, ви можете змусити це працювати, але в Інтернеті є буквально сотні статей про те, як це зробити. Таких статей для подібного макета з таблицями практично не існує, оскільки це очевидно. Незалежно від того, що ви говорите проти таблиць і на користь CSS, цей один факт скасовує все: основний макет із трьох стовпців у CSS часто називають "Святим Граалем". "[ Https://stackoverflow.com/a/4964107/ 1758051]

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