CSS Bootstrap 3 和 Boostrap 4 - input-xs（小于 sm）

Bootstrap 3 & Boostrap 4 - input-xs (smaller than sm)

提问by Leandro

I wasted a lot of time searching a way to make my own xs size (smaller than the small) for input and input group, so here's the code!

我浪费了很多时间寻找一种方法来为输入和输入组制作我自己的xs大小（小于小）， 所以这里是代码！

---

---

Update 2014/11/14

更新 2014/11/14

Peter Butkovicupload the bug/request to the bootstrap github:
https://github.com/twbs/bootstrap/issues/15107

Peter Butkovic将 bug/请求上传到 bootstrap github：https:
//github.com/twbs/bootstrap/issues/15107

with the following response from theirs:

他们的回应如下：

We won't be adding it to v3 and I don't think we'll have the xs buttons even in v4, but I'll keep it in mind for that if we opt to keep it around.

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

回答by Leandro

For inputs smallers:

对于较小的输入：

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

Sample usage in input-group:

输入组中的示例用法：

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

Alternatively you can add class to the input-group like this one:

或者，您可以将类添加到输入组，如下所示：

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

and use:

并使用：

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

回答by s.alem

If you are using bootstrap-sass, then you can leverage input-sizemixin:

如果您正在使用bootstrap-sass，那么您可以利用input-sizemixin：

$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);