Bootstrap 3、Bootstrap 4和Bootstrap 5 - input-xs（小于sm）

Question

我曾经浪费了很多时间搜索自己创建 xs 大小(比 small 更小)的输入框和输入组方式，所以这里提供代码！

Peter Butkovic 将错误/请求上传到 Bootstrap 的 Github：
https://github.com/twbs/bootstrap/issues/15107

他们做出了以下回应：

我们不会将其添加到 v3 中，我认为即使在 v4 中也不会有 xs 按钮，但如果我们选择保留它，我会记住它。

仍在为 Bootstrap 5 工作中。

- Leandro Bardelli

Answer 1

对于较小的输入：

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

在输入组中的使用示例：

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-xs btn-success">
            <i class="glyphicon glyphicon-plus"></i>
        </button>
    </span>
    <input type="text" class="form-control input-xs" />
    <span class="input-group-btn">
        <button class="btn btn-xs btn-danger">
            <i class="glyphicon glyphicon-minus"></i>
        </button>
    </span>
</div>

另外一种方法是将 class 添加到 input-group，像这样：

.input-group-xs>.form-control,
.input-group-xs>.input-group-addon,
.input-group-xs>.input-group-btn>.btn {
    height: 22px;
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
}

并且使用：

<div class="input-group input-group-xs">
    <span class="input-group-btn">
        <button class="btn btn-success">
            <i class="glyphicon glyphicon-plus"></i>
        </button>
    </span>
    <input type="text" class="form-control" />
    <span class="input-group-btn">
        <button class="btn btn-danger">
            <i class="glyphicon glyphicon-minus"></i>
        </button>
    </span>
</div>

.input-xs {
  height: 22px!important;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.input-group-xs>.form-control,
.input-group-xs>.input-group-addon,
.input-group-xs>.input-group-btn>.btn {
  height: 22px;
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-xs btn-success">
      <i class="glyphicon glyphicon-plus"></i>
    </button>
  </span>
  <input type="text" class="form-control input-xs" />
  <span class="input-group-btn">
    <button class="btn btn-xs btn-danger">
      <i class="glyphicon glyphicon-minus"></i>
    </button>
  </span>
</div>
<br/>
<div class="input-group input-group-xs">
  <span class="input-group-btn">
    <button class="btn btn-success">
      <i class="glyphicon glyphicon-plus"></i>
    </button>
  </span>
  <input type="text" class="form-control" />
  <span class="input-group-btn">
    <button class="btn btn-danger">
      <i class="glyphicon glyphicon-minus"></i>
    </button>
  </span>
</div>

- Leandro Bardelli

---

我会将高度改为23像素。如果你缩放到400％，你会发现它更适合。 - Tower Jimmy

Answer 2

如果您正在使用bootstrap-sass，那么您可以利用input-size混合器：

$input-height-xs: 27px; // adjust it according to your theme.

@include input-size('.input-xs', $input-height-xs, $padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $input-border-radius-small);

- s.alem

---

我认为这一定是一条注释。 - Leandro Bardelli

为什么？因为它很简短吗？我不太同意，因为它回答了这个问题。 - s.alem

因为它是用于Sass的。 - Leandro Bardelli

我没有看到任何新的东西。 - Leandro Bardelli

这是在开头就声明的。他们有一个官方的Sass版本，v4正在使用Sass编写。许多人使用Sass与Bootstrap。因此，我认为这并不无关紧要。如果您觉得这是正确的做法，仍然可以标记答案。 - s.alem

我知道，但这与问题无关，我更在考虑一个明确的解决方案来解决这个问题。 - Leandro Bardelli