Question

我使用bootstrap input-append add-on将一个图标添加到输入字段的末尾。一切都很好。问题是在输入上设置100％的宽度会将父级＆＃34;输入 - 包装器＆＃34;之外的附加范围标记推送出来。 div可视区域。我正在使用box-sizing：border-box;在所有输入字段上。我似乎能够做到这一点的唯一方法是设置父div＆＃34; input-wrapper＆＃34;显示：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上，使用插件的“输入块级别”功能存在问题（它适用于所有其他输入）。一些人想出了一些解决方法，主要是使用桌面显示器。你可以在这里看到： https://jsfiddle.net/BMironov/BVmUL/

这是处理它的CSS - 您可能想要使用附加跨距的方式。

.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中。

Answer 2

很明显，如果你的一个嵌套元素input设置为100％宽度，那么你的另一个嵌套元素span将超出包装器的总宽度。 input。

bootstrap 2 input-append add-on

2 个答案: