Bootstrap. Подготовленный и добавленный ввод. Как увеличить ширину поля ввода?

Я использую Bootstrap из twitter. Я хочу сделать добавленный текст, поле ввода и кнопку, но я хочу, чтобы мое поле ввода имело максимальную доступную ширину, так что правый край кнопки отправки находился вблизи правого края колодца. В документации по загрузке есть класс .input-block-level, который позволяет любому или элементу вести себя как элемент уровня блока, но применяя его к вводу, дает в результате центральный вход размер скважины, http://jsfiddle.net/Uc4CE/

<div class="well">
<div class="input-prepend input-append">
  <span class="add-on">Some text</span>
  <input class="input" type="text" name="xxx" value="xxx" />
  <input type="hidden" name="next" value="xxx" />
  <input type="submit" value="xx" class="btn btn-info" />
</div>
</div>

Ответ 1

Я искал что-то подобное, и это решение от https://gist.github.com/mattjorn/5020957 работало для меня - добавьте .input-block-level в свой внешний div, например,

<div class="input-prepend input-append input-block-level">

а затем расширите бутстрап CSS следующим образом:

.input-prepend.input-block-level {
  display: table;
  width: 100%;
}

.input-prepend.input-block-level .add-on {
  display: table-cell;
  background-color: white;
}

.input-prepend.input-block-level > input {
  box-sizing: border-box;
  height: 30px;
  display: table-cell;
  width: 100%;
  border-left-style: none;
}

Ответ 2

EDIT: Обратите внимание, что этот ответ действителен для Bootstrap v2.3.x. Bootstrap 3 уже решает это изначально (см. Документ).

Вдохновленный ответом Lee, вот мое лучшее улучшенное решение (включает в себя как append, так и preend, минимальную возможную ширину надстройки, удаленные ненужные стили, автоматическую высоту...). Включите это после Bootstrap CSS/LESS файлов:

.input-append.input-block-level,
.input-prepend.input-block-level {
  display: table;
}

.input-append.input-block-level .add-on,
.input-prepend.input-block-level .add-on {
  display: table-cell;
  width: 1%; /* remove this if you want default bootstrap button width */
}

.input-append.input-block-level > input,
.input-prepend.input-block-level > input {
  box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
  -moz-box-sizing: border-box; /* for Firefox */
  display: table; /* table-cell is not working well in Chrome for small widths */
  min-height: inherit;
  width: 100%;
}

.input-append.input-block-level > input {
  border-right: 0;
}

.input-prepend.input-block-level > input {
  border-left: 0;
}

Используйте это в своем HTML и помните, вам нужно использовать теги a не button для ваших кнопок в этом случае:

<div class="input-append input-block-level">
  <input type="text" />
  <a class="btn add-on">click</a>
</div>

Изменить: В IE8, если вы установили display: table в .input-append.input-block-level > input, тег ввода становится неизменным, несмотря на то, что он фокусируется.

Полностью исключая этот параметр display:, он работает как ожидалось в IE8, а также в текущем Chrome/Safari/Firefox.

Ответ 3

может использоваться для div class="input-prepend input-append" дополнительного стиля margin-right

результат для вашего кода:

<div class="well">
    <div class="input-prepend input-append" style="margin-right: 108px;">
        <span class="add-on">Some text</span>
        <input class="input-block-level" type="text" name="xxx" value="xxx" />
        <input type="hidden" name="next" value="xxx" />
        <input type="submit" value="xx" class="btn btn-info" />
    </div>
</div>

http://jsfiddle.net/Uc4CE/1/

Ответ 4

Есть исправление для этого в ветке 3.0 Twitter Bootstrap согласно @комментарий mdo по этой проблеме.

Тем не менее, я использую следующий javascript в своих проектах тем временем, когда я выводил макет django-crispy forms в пределах <div class="span4">. Это объясняет гибкие проекты.

пример HTML

<div class="row-fluid">
    <div class="span4">
        {% crispy form %}
    </div>
</div>

style.css

/* I also set this to account for smaller widtsh */

form fieldset {
    width:100%
}

fix.js

ПРИМЕЧАНИЕ. Я запускаю это также с изменениями окна.

function sizeInputs() {
var fw = $('field fieldset'). innerWidth(); $('form.input-prepend'). each (function() { $ (this).children('input'). css ('width', fw - $(this).children('. add-on'). innerWidth()); }); };

$(document).ready(function() {sizeInputs();});

$(window).resize(function() {sizeInputs();});