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

Ответ 1

Я бы поместил каждый элемент, который вы хотите встроить внутри отдельного col-md- * div внутри вашей строки. Или заставьте свои элементы отображать встроенные. Класс form-control отображает блок, потому что способ загрузки выглядит следующим образом:

Ответ 2

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

Ответ 3

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

Посмотрите на этом

Ответ 4

Ни один из них не работал у меня, должен был использовать класс .form-control-static.

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

Ответ 5

Вы можете сделать это следующим образом:

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

Fiddle

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

 form-control-static not only form-control

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

благодаря

Ответ 9

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

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

"Дело в том, что на основе этого обсуждения я преобразовал несколько существующих tds и trs в divs. 45 минут возились с ним, пытаясь заставить все выстраиваться рядом друг с другом, и я сдался. TDs через 10 секунд позже - работает - сразу - во всех браузерах, больше нечего делать. Попытайтесь заставить меня понять - какое возможное оправдание вы хотите, чтобы я сделал это иначе?" См. [/info/11391/why-not-use-tables-for-layout-in-html/78028#78028

И это: "

Макет должен быть простым. Тот факт, что есть статьи, написанные о том, как достичь динамического размещения трех столбцов с верхним и нижним колонтитулами в CSS, показывает, что это плохая система макета. Конечно, вы можете заставить его работать, но есть буквально сотни статей в Интернете о том, как это сделать. Таких статей почти нет для аналогичного макета с таблицами, потому что это явно очевидно. Независимо от того, что вы говорите против таблиц и в пользу CSS, этот факт отменяет все: базовое расположение трех столбцов в CSS часто называется "Святой Грааль". "/info/11391/why-not-use-tables-for-layout-in-html/78030#78030

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