Как настроить ширину поля ввода в бутстрапе 3

После удаления важных функций, таких как input-xlarge и input-large, какова их замена в bootstrap 3?

Конечно, я мог бы использовать col-lg-12 и т.д., но это дает ошибку в области вкладок.

Я мог бы также использовать style = "width:30px; ", но тогда он потерял бы свою отзывчивость, в отличие от input-xlarge. Все предложения и т.д.?

Ответы

Ответ 1

В Bootstrap 3, .form-control (класс, который вы вводите ваши входы) имеет ширину 100%, что позволяет обернуть их в div-col-lg-X для компоновки. Пример из документов:

<div class="row">
  <div class="col-lg-2">
    <input type="text" class="form-control" placeholder=".col-lg-2">
  </div>
  <div class="col-lg-3">
    <input type="text" class="form-control" placeholder=".col-lg-3">
  </div>
  <div class="col-lg-4">
    <input type="text" class="form-control" placeholder=".col-lg-4">
  </div>
</div>

Смотрите Размер столбца.

Это немного отличается от Bootstrap 2.3.2, но вы быстро привыкаете к нему.

Ответ 2

Вы можете использовать эти классы

вход-Л.Г.

вход

и

вход-см

для полей ввода и замените ввод на btn для кнопок.

Проверьте эту документацию http://getbootstrap.com/getting-started/#migration

Это изменит только высоту элемента, чтобы уменьшить ширину, которую вы должны использовать для системных классов сетки, например col-xs-* col-md-* col-lg-*.

Пример col-md-3. См. Документ http://getbootstrap.com/css/#grid

Ответ 3

я решил с max-width в моем основном css файле.

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Это простое решение с небольшим "кодом"

Ответ 4

  <form role="form">
    <div class="form-group">
      <div class="col-xs-2">
        <label for="ex1">col-xs-2</label>
        <input class="form-control" id="ex1" type="text">
      </div>
      <div class="col-xs-3">
        <label for="ex2">col-xs-3</label>
        <input class="form-control" id="ex2" type="text">
      </div>
      <div class="col-xs-4">
        <label for="ex3">col-xs-4</label>
        <input class="form-control" id="ex3" type="text">
      </div>
    </div>
  </form>

Ответ 5

<div class="form-group">
                    <div class="input-group col-md-5">
                    <div class="input-group-addon">
                    <span class="glyphicon glyphicon-envelope"></span> 
            </div>
                        <input class="form-control" type="text" name="text" placeholder="Enter Your Email Id" width="50px">

                    </div>
                    <input type="button" name="SIGNUP" value="SIGNUP">
            </div>