html - bootstrap 2 输入附加组件

Question

我正在使用 bootstrap input-append 插件将图标添加到输入字段的末尾。这一切都很好。问题是在输入上设置 100% 的宽度会将附加 span 标签推到父“input-wrapper”div 可视区域之外。我正在使用 box-sizing: border-box;在所有输入字段上。我似乎可以完成这项工作的唯一方法是将父 div“input-wrapper”设置为显示: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

编辑:糟糕的是，在 Bootstrap2 上，“输入 block 级”功能与插件一起使用时存在问题(它适用于所有其他输入)。一些人提出了一些解决方法，主要是使用表格显示。你可以在这里看到: 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% 宽度，而是将类 input-block-level 添加到文本输入。您不需要任何额外的 CSS，该功能内置于 Bootstrap 2 中。