Css Twitter引导输入附加不是容器的全宽

我有一个基于推特引导的网站

在构建2列表单时，我尝试使用

input prepend

类在表单输入的左侧添加电子邮件图标。我希望输入字段和前置图标始终是容器的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>

电子邮件地址
请输入您的电子邮件地址无效的电子邮件地址
电话号码
请输入您的电话号码无效的电话号码

使用此代码时，表单如以下屏幕截图所示：

但是，当我调整浏览器的大小以模拟较小的屏幕时，带有

附加组件的字段的宽度大小不正确，如下所示：

问题


此表单是否有其他编码方式，以便输入字段和图标100%匹配其他字段
或者我需要在Bootstrap中更改什么CSS来更改它
事实证明，这是一个已知的问题，将在版本3中解决。
引导程序3尚未推出，因此这里是我针对追加和预结束案例的简单而有效的解决方案。在引导CSS/LESS文件后包括以下内容：

.input-append.input-block-level，
.input-prepend.input-block-level{
显示：表格；
}
.input-append.input-block-level.add-on，
.input-prepend.input-block-level.add-on{
显示：表格单元格；
宽度：1%；/*如果需要默认引导按钮宽度，请删除此选项*/
}
.input-append.input-block-level>input，
.input-prepend.input-block-level>input{
框大小：边框框；/*使用引导混入或包含供应商变量*/
显示：表格；/*表格单元格在小宽度的镀铬中工作不正常*/
最小高度：继承；
宽度：100%；
}
.input-append.input-block-level>input{
右边界：0；
}
.input-prepend.input-block-level>input{
左边框：0；
}

在HTML中这样使用它，记住，在这种情况下，您必须为按钮使用
a
标记而不是
按钮
：


点击
现在的解决方案是什么？（BS3可能还没有准备好。）Javascript可以做到这一点，但我不知道有什么像样的CSS方法可以做到。考虑到它可能会与[希望]未来的引导核心修复冲突，我宁愿不提出自定义解决方案。我只是尝试了你的代码来解决我的问题：但它没有按预期工作。问题是现在一行中有两个按钮和输入字段。有什么想法吗？@smajl-这很好用。言语无法表达你让我多么高兴。即使是粗体的，我也没有注意到它一定是一个
a
标签。