У меня есть сайт на 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>
При использовании этого кода форма выглядит как этот снимок экрана:
Но когда я изменяю размер браузера, чтобы имитировать меньший экран, ширина поля с добавлением add-on
имеет неправильный размер, как показано здесь:
Вопрос
- Есть ли другой способ кодирования этой формы, чтобы поле ввода и значок были на 100% совпали с другими полями?
- Или Какой CSS мне нужно изменить в Bootstrap, чтобы изменить это?