Bootstrap 3-input-xs (меньше см)

Я потратил много времени на поиск способа сделать свой собственный размер xs (меньше, чем маленький) для ввода и ввода группы,Итак, вот код!

обновление 2014/11/14

Питер Буткович загрузите ошибку / запрос в загрузочный github:
https://github.com/twbs/bootstrap/issues/15107

со следующим ответом от них:

мы не будем добавлять его в v3 и I не думаю, что мы будем иметь xs кнопки даже в v4, но я буду иметь это в виду, если мы решим держи его при себе.

2 52
css css3 twitter-bootstrap twitter-bootstrap-3

2 ответа:

для входа 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;
}

пример использования в входные группы:

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

в качестве альтернативы вы можете добавить класс в группу ввода, как этот:

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

Если вы используете bootstrap-sass, тогда вы можете использовать input-size mixin:

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