引导较小的输入和较小的输入组插件问题答案

【问题标题】：Bootstrap smaller input and smaller input-group-addon issue引导较小的输入和较小的输入组插件问题
【发布时间】：2018-05-17 07:22:24
【问题描述】：

我在我的 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;
}

当然，我还需要调整input-group-addon，否则它会看起来像这样。

为了防止这种情况并让input-group-addon 更小，我已将其添加到我的 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>

【问题讨论】：

您只需将最外面的div、Docs 中的.form-group 更改为.input-group。（仅供参考：您可能需要调整 border-radius 规则以适用于独立角以与整体框架样式保持一致。）
这能回答你的问题吗？ Bootstrap 3 & Boostrap 4 - input-xs (smaller than sm)
@Leandro 为什么要回复将近 3 年的帖子？并且有一个公认的答案？

标签： css twitter-bootstrap

【解决方案1】：

如果我是你，我会在“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>

【讨论】：