Bootstrap较小的输入和较小的input-group-addon问题

Question

我在CSS中使用它来创建一个较小的输入字段：

input-group-addon

但当然我也需要调整input-group-addon或者它看起来像这样。

为了防止这种情况并使.input-group-xs > .form-control, .input-group-xs > .input-group-addon, .input-group-xs > .input-group-btn > .btn { height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } 更小，我已将其添加到我的CSS中。

<div class="input-group-xs form-group" id="div_exp_aantal['.$i.']">
  <input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
  <span class="input-group-addon">stuk</span>
</div>

但它现在看起来像这样。

有任何建议让它再次对齐吗？

完整代码

{
    "v" : 1,
    "key" : {
        "_fts" : "text",
        "_ftsx" : 1
    },
    "name" : "$**_text",
    "ns" : "mydatabase.mycollection",
    "collation" : {
        "strength" : 1
    },
    "weights" : {
        "$**" : 1
    },
    "default_language" : "english",
    "language_override" : "language",
    "textIndexVersion" : 3
}

Answer 1

如果我是你，我会添加班级名称＆＃34;输入组＆＃34;在＆＃34;输入组-xs＆＃34;之前为了添加基础css。

.input-group {
position: relative;
    display: table;
    border-collapse: separate;
}

所以你的代码应该是这样的：

<div class="input-group input-group-xs form-group" id="div_exp_aantal['.$i.']">
  <input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
  <span class="input-group-addon">stuk</span>
</div>