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

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

используйте предопределенные классы сетки Bootstrap для выравнивания меток и групп элементов управления формы в горизонтальной компоновке путем добавления .form-horizontal в форме (которая не должна быть <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-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/

спасибо с уважением

или вы можете сделать это:

<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, и реакция коленного рефлекса никогда никогда не использует таблицу, TR и TD. Да, я знаю, что DIV class="таблица" с DIV class="строка" и DIV class="ячейка" намного лучше. За исключением тех случаев, когда это не работает, и есть много случаев. Я не считаю, что люди должны слепо игнорировать эти ситуации. Бывают случаи, что таблица/TR / TD будет работать просто отлично, и нет причин использовать более сложный и более хрупкий подход только потому, что он считается более элегантным. Разработчик должен понимать, каковы преимущества различных подходов, и компромиссы, и нет абсолютного правила, что DIVs лучше.

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

и вот это: "

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

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