Bootstrap 3.0: как разместить текст и ввод в одной строке?

В настоящее время я переключаю свой сайт на Bootstrap 3.0. У меня проблема с вводом формы и форматированием текста. То, что работало в Bootstrap 2, не работает в Bootstrap 3.

Как я могу разместить текст в одной строке до и после ввода формы? Я сузил его до проблемы с классом 'form-control' в версии примера для Bootstrap 3.

Как мне получить весь текст и ввод в одной строке? Я бы хотел, чтобы пример начальной загрузки 3 выглядел как пример начальной загрузки 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 в вашей строке. Или заставьте ваши элементы отображаться встроенными. Класс form-control отображает блок, потому что, по мнению начальной загрузки, это должно быть сделано.

Прямо из документации 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>

Скрипка

Я решил просто добавить переопределение для всех моих текстовых полей на основном CSS моего сайта, вот так:

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

просто дайте матери 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>

все, пожалуйста, проверьте обновленный код, так как мы должны использовать

 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 столбцов. Мне нужно приглашение и ввод сразу после него, и я хочу, чтобы столбцы растягивались по мере необходимости.

Да, я знаю, что это против самого бутстрапа. И НИКОГДА не используйте стол. Потому что DIV намного лучше таблиц. Но проблема в том, что таблицы, строки и ячейки действительно РАБОТАЮТ.

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

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

И это: "

Макет должен быть простым. Тот факт, что есть статьи, написанные о том, как добиться динамического макета из трех столбцов с верхним и нижним колонтитулами в CSS, показывает, что это плохая система макета. Конечно, вы можете заставить его работать, но в Интернете есть буквально сотни статей о том, как это сделать. Для подобного макета с таблицами таких статей практически нет, потому что это очевидно. Независимо от того, что вы говорите против таблиц и в пользу CSS, один факт отменяет все: базовый трехколоночный макет в CSS часто называют «Святым Граалем». "[ Https://stackoverflow.com/a/4964107/ 1758051]

Мне еще предстоит увидеть способ заставить DIV всегда выстраиваться в столбец во всех ситуациях. Мне продолжают показывать тривиальные примеры, которые на самом деле не сталкиваются с проблемами. «Отзывчивый» - это способ, которым они не всегда будут выстраиваться в столбец. Однако, если вам действительно нужен столбец, вы можете потратить часы, пытаясь заставить DIV работать. Иногда, что бы ни говорили фанатики, нужно использовать соответствующие технологии.