Ширина ввода в виде встроенного бутстрапа 3

Я не понимаю, как я могу настроить ширину входного (form-control) в Bootstrap 3?

<header>
    <div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search"> 
                  </div>
                    <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/'+document.getElementById('search').value">
            </form>
        </div>
    </div>
</header>

Могу ли я сделать это без некоторых стилей (например, ширина в пикселях)?

Ответы

Ответ 1

Обновить (добавлена ​​ссылка W3Schools): Я просто заметил, что есть очень хороший ответ по этой проблеме: w3schools.com/bootstrap/bootstrap_forms_sizing.asp. Есть хорошие примеры того, как применять значения .input-lg и .input-sm для высоты ввода или .col-lg-* и .col-sm- для ширины ввода.

Оригинальный ответ: Вы пытались использовать Bootstrap Grids с вашими классами и col-xs-.. для каждого поля ввода, которое необходимо уложить на мобильное устройство. Что-то вроде кода ниже (копия, вставленная из Bootstrap):

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Я применил эти классы col-xs-.. к вашей форме и собрал ваши столбцы на мобильном устройстве (хорошо, я просто уменьшил окно браузера и работал).

<div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                <div class="col-xs-12 col-md-2"> 
                    <div class="form-group">  
                        <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search">  
                    </div>
                </div>
                    <div class="col-xs-6 col-md-1">
                        <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/' + document.getElementById('search').value"/>
                </div>
            </form>
        </div>
    </div>

На настольном устройстве я дал этим полям меньшие значения: col-md-2 и col-md-1, но вы можете настроить их так, как вам нравится.

Обновлено: Вы подумывали о создании своих пользовательских цветов и размеров с помощью LESS-переменных для ваших элементов ввода, которые Bootstrap позволяет вам выполнить: "Настроить меньше переменных для определения цветов, размеров и т.д. Внутри ваших пользовательских таблиц стилей CSS".

Если вы проверите Customize часть сайта Bootstrap. Он позволяет настраивать элементы ввода в вашей форме. В вашем случае могут быть полезны LESS-переменные, такие как: @input-bg, @input-color, @input-height-base, @input-border и другие. Например, @input-height-base по умолчанию .form-control height.

Ответ 2

Try

.form-inline .form-group input {
    width:140px;
}

Для css для манипуляции

Ответ 3

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

Вы также можете быстро отсортировать все входы и другие элементы внутри .input-group с помощью классов .input-group-sm или .input-group-lg