Twitter Bootstrap Input Append not full width of container答案

【问题标题】：Twitter Bootstrap Input Append not full width of containerTwitter Bootstrap Input Append not full width of container
【发布时间】：2012-12-17 02:16:33
【问题描述】：

我有一个基于Twitter Bootstrap 的网站。

在构建 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>

使用此代码时，表单如下截图：

但是当我调整浏览器的大小以模拟更小的屏幕时，带有 add-on 前缀的字段的宽度大小不正确，如下所示：

问题

此表单是否有不同的编码方式，以便输入字段和图标为 100% 并与其他字段匹配？
或者我需要在 Bootstrap 中更改哪些 CSS 才能更改？

【问题讨论】：

标签： css input twitter-bootstrap responsive-design

【解决方案1】：

Bootstrap 3 还没有推出，所以这是我针对追加和前置情况的简单且有效的解决方案。在 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>

【讨论】：

我刚刚尝试了您的代码来解决我的问题：stackoverflow.com/questions/18255699/… 但它没有按预期工作。问题是现在有 2 个按钮与输入字段一起排成一行。有什么想法吗？
@smajl - 这很好用。言语无法表达你让我多么开心。
即使它是粗体我也错过了它必须是a 标签。

【解决方案2】：

原来这是一个已知问题，将在版本 3 中解决。 [SOURCE]

【讨论】：

现在有什么解决方法？（BS3 可能还没有准备好一段时间。）
Javascript 可以做到，但我不知道有什么好的 CSS 方法可以做到。
我宁愿不提出自定义解决方案，因为它可能会与 [希望] 未来的 Bootstrap 核心修复冲突。