Bootstrap 3 - wejście-xs (mniejsze niż sm) - css, css3, twitter-bootstrap, twitter-bootstrap-3

Traciłem dużo czasu, szukając sposobu, aby mój własny rozmiar xs (mniejszy niż mały) dla grupy wejściowej i wejściowej, więc oto kod!

Aktualizacja 2014/11/14

Peter Butkovic prześlij błąd / prośbę do github bootstrap:
https://github.com/twbs/bootstrap/issues/15107

z następującą odpowiedzią:

Nie dodamy go do wersji 3 i nie sądzę, że będziemy mieli xs przyciski nawet w wersji 4, ale będę o tym pamiętać, jeśli się na to zdecydujemy trzymaj to.

Odpowiedzi:

Dla wejść mniejszych:

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

Wykorzystanie próbki w grupie wejściowej:

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

Alternatywnie możesz dodać klasę do grupy wejściowej takiej jak ta:

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

I użyć:

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

Jeśli używasz bootstrap-sass, wtedy możesz wykorzystać 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);