bootstrap 2 个输入追加插件

Question

我正在使用 bootstrap 输入附加插件将图标添加到输入字段的末尾。这一切都很好。问题是在输入上设置 100% 的宽度会将附加 span 标签推到父 "input-wrapper" div 可视区域之外。我正在使用 box-sizing: border-box;在所有输入字段上。我似乎可以完成这项工作的唯一方法是将父 div "input-wrapper" 设置为 display: flex;不幸的是，这不是一个选项，因为它在 IE8 或 9 中不受支持。我还有哪些其他选项。

http://jsfiddle.net/chapster11/zjx2zc6e/

示例代码。

        <div id="form-elements">
        <div class="input-wrapper input-append">
            <input id="paymentDate" class='paymentDate' type="text" />
            <span class="add-on"><i class="icon-th"></i></span>
        </div>
    </div>

CSS 代码

    #form-elements{
        margin: 20px;
    }

   input[type]{
     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-height: 30px;
   }

    #paymentDate{
     height: 30px;
     width: 100%;
    }

    .input-wrapper{
        width: 600px;
        border: 1px dashed red;
    }

Answer 1

很明显，如果您的一个嵌套元素 input 设置了 100% 宽度，您的另一个嵌套元素 span 将超出包装器，总宽度被 input.

Answer 2

编辑：糟糕，在 Bootstrap2 上，"input-block-level" 功能与插件一起使用时出现问题（它适用于所有其他输入）。一些人提出了一些解决方法，主要是使用 table 显示。你可以在这里看到： https://jsfiddle.net/BMironov/BVmUL/

这是处理它的 CSS - 您可能想尝试一下附加组件 span 的工作方式。

.input-append.input-block-level {
  display: table; 
}
.input-append.input-block-level .add-on {
  display: table-cell;
  width: 16px;
}
.input-append.input-block-level > input {
  box-sizing: border-box; 
  display: table;
  min-height: inherit;
  width: 100%;
}

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

不要将输入设置为 100% 宽度，而是将 class input-block-level 添加到文本输入。您不需要任何额外的 CSS，该功能内置于 Bootstrap 2.

bootstrap 2 个输入追加插件

bootstrap 2 input-append add-on

html

css

twitter-bootstrap-2