Css 引导较小的输入和较小的输入组加载项问题

我已在CSS中使用此选项创建了一个较小的输入字段：

.input-xs {
  height: 22px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
  border-radius: 3px;
}

当然，我也需要调整

输入组插件

，否则它会像这样。

为了防止这种情况，并使

输入组插件

更小，我已将其添加到CSS中

.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;
}

但现在看起来是这样的

有什么建议让它重新对齐吗

完整代码

<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>

斯图克

如果我是你，我会在“input group xs”之前添加类名“input group”，以便添加基本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>

斯图克

您只需将最外层的

div中的
.form group
更改为
.input group
。（仅供参考：您可能需要调整边界半径规则以应用于独立的角点，以符合整体框架样式。）这是否回答了您的问题@莱安德罗：你为什么要回复一篇快3年的帖子？有一个公认的答案吗？