Twitter Bootstrap Input Добавляет не полную ширину контейнера

У меня есть сайт на Twitter Bootstrap.

При создании формы из 2 столбцов я пытаюсь использовать класс input-prepend, чтобы добавить значок электронной почты слева от ввода формы. Я хочу, чтобы поле ввода вместе с значком preend всегда составляло 100% контейнера.

Здесь мой код:

                      <div class='row-fluid'>
                        <div class='span6'>
                          <div class='control-group' id='contactEmailControlGroup'>
                            <label for='contactEmail'>Email Address</label>
                              <div class='input-prepend'> <span class='add-on'><i class='icon-envelope'></i></span>
                                <input type='email' name='contactEmail' id='contactEmail' class='span11' placeholder='Your email address...' tabindex='3' required/>
                                <span class='help-inline formAlert' id='contactEmailError'> <i class='icon-edit formAlertIcon'></i> Please enter your email address </span> <span class='help-inline formAlert' id='contactEmailInvalidError'> <i class='icon-exclamation-sign formAlertIcon'></i> Invalid email address </span>
                            </div>
                          </div>
                        </div>
                        <div class='span6'>
                          <div class='control-group'>
                            <label for='contactPhone'>Phone Number</label>
                            <input type='tel' name='contactPhone' id='contactPhone' class='span12' placeholder='Your phone number...' tabindex='4' required/>
                            <span class='help-inline formAlert' id='contactPhoneError'> <i class='icon-edit formAlertIcon'></i> Please enter your phone number </span> <span class='help-inline formAlert' id='contactPhoneInvalidError'> <i class='icon-exclamation-sign formAlertIcon'></i> Invalid phone number </span> </div>
                        </div>
                      </div>

При использовании этого кода форма выглядит как этот снимок экрана: Form correctly displaying on desktop

Но когда я изменяю размер браузера, чтобы имитировать меньший экран, ширина поля с добавлением add-on имеет неправильный размер, как показано здесь: Form incorrectly displaying on tablet and phone

Вопрос

  • Есть ли другой способ кодирования этой формы, чтобы поле ввода и значок были на 100% совпали с другими полями?
  • Или Какой CSS мне нужно изменить в Bootstrap, чтобы изменить это?

Ответы

Ответ 1

Оказывается, это известная проблема и будет рассмотрена в версии 3. [SOURCE]

Ответ 2

Bootstrap 3 еще не вышел, поэтому вот мое простое и эффективное решение для приложений append и prepend. Включите это после 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 */
  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>