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


92

В настоящее время я переключаю свой сайт на 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>


Они оба такие же, как у вас, только есть дополнительный класс form-controlв вашем примере начальной загрузки 3.
Кайл Нидхэм

1
Взгляните на пример в документации по начальной загрузке. Вам не хватает классов на этикетке getbootstrap.com/css/#forms-horizontal
bumperbox

Извините, но я все еще в замешательстве. В нижнем примере (BS3) есть класс 'form-control', который дает лучший вид. Я хочу, чтобы он выглядел лучше, И чтобы текст и ввод были в одной строке. Что мне не хватает?
fat fantasma

Позвольте мне задать вопрос по-другому. Как мне разместить текст и поля ввода в одной строке и выровнять их по красивым столбцам? См. Эту скрипку jsfiddle.net/fatfantasma/QwkpE . Конечно, я хотел бы добавить текст в крайний правый угол в той же строке. Как мне это сделать?
fat fantasma

.input-lgувеличивает высоту поля ввода, но нам также нужен класс для регулировки высоты и размера метки.
Петрус Терон

Ответы:


39

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


138

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

15
+1. Это должен быть принятый ответ, поскольку он связывает официальную документацию
EProgrammerNotFound

это ответ только по ссылке, и он не должен быть принятым без примера в случае изменения или удаления указанной страницы.
NDM

почему правильный ответ - это правильный ответ? это должен быть правильный ответ! @fat fantasma
Мадуро

Следует обернуть их в form-control-static, см. Ответы ниже
rmcsharry

2
@Whitecat, который разработан с адаптивным макетом - чтобы заставить его работать и на мобильных устройствах, используйте col-xs- *, а не col-sm- *
niico

25

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

Взгляните на это


это должен быть лучший ответ, чем класс, form-horizontalпотому что он не заставлял div с показом класса form-groupв блоке.
shawnzhu

Это применимо только к формам в области просмотра, ширина которых не менее 768 пикселей.
rmcsharry

13

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

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


1
Это действительно помогло. Без этого текст метки и вводимый текст не были выровнены по цвету -
Брендан Коди-Кенни

Это должен быть правильный ответ, особенно если вы хотите, чтобы ваша форма корректно оборачивалась на небольших устройствах
rmcsharry

Да, это тоже работает для меня. Другие решения не работают для столбцов col-xs- *. Использование 'form-control-static text-right' у меня работало на BS 3.3.7.
Neutrino

10

Сделать это можно так:

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

Скрипка


3

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

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

2
Что это значит?
AgilePro

3

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


0

В Bootstrap 4 для горизонтального элемента вы можете использовать его .rowс .col-*-*классами, чтобы указать ширину ваших меток и элементов управления. см. эту ссылку .

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


В вопросе конкретно говорится о Bootstrap 3.
blupointmedia

1
У меня были такие же проблемы с бутстрапом 4, и я опубликовал его, чтобы помочь кому-то другому
Шоджаеддин

-2

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

<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 работать. Иногда, что бы ни говорили фанатики, нужно использовать соответствующие технологии.


2
Таблицы не реагируют.
Педро Морейра

Всем известно, что таблицы не переформатируются в не-таблицы. Но если вам нужна строка, она ВСЕГДА остается строкой. Вы просто не можете обеспечить это с помощью тегов DIV. Люди действуют так, будто вы всегда хотите отзывчивости, но то, что вы делаете, путают «большую часть времени» с «все время». На момент написания этот ответ получил два голоса против. Если вы согласны с моей точкой зрения, что иногда вам просто нужен TR, а затем сообщите об этом другим.
AgilePro

У вас есть право на собственное мнение, но я думаю, что общее мнение состоит в том, что вы никогда не должны использовать таблицы для чего-либо другого, отображающего табличные данные. Таблицы слишком ограничены в том, что они могут делать и насколько они настраиваемы. Если вам по-прежнему нужно дать div'ам возможность перемещаться,
Педро Морейра
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.