Как добиться стиля "мини", используя Bootstrap (или прямой CSS)?

Я использую класс Bootstrap btn-mini для кнопок "mini" и ищу что-то аналогичное для создания элемента "mini" select, где кнопка select (т.е. часть, которую вы нажимаете, чтобы отобразить список опций, а не список самих параметров) имеет тот же размер и стиль, что и мини-кнопка.

Когда я применяю класс btn-mini к элементу выбора, стиль шрифта кнопки выбора имеет тот же размер, что и мини-кнопка, но размер самой кнопки выбора не изменяется от размера по умолчанию.

Есть ли другой класс Bootstrap, который я должен использовать? Или другой способ сделать это?

P.S. Я работаю над OS X Chrome, но, естественно, надеюсь, что есть совместимое с кросс-браузером решение.

Ответы

Ответ 1

HTML

<select class="btn btn-mini">
    <!-- options -->
</select>
<span class="caret"></span>

CSS

select.btn-mini {
    height: auto;
    line-height: 14px;
}

/* this is optional (see below) */
select.btn {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
    padding-right: 16px;
}

select.btn-mini + .caret {
    margin-left: -20px;
    margin-top: 9px;
}

Последние 2 правила являются необязательными, он сделает <select> похожим на <button>, я также добавил к нему каретку. Смотрите fiddle.

Ответ 2

На всякий случай, если пользователи Bootstrap 3 столкнутся с этим старым вопросом, вот путь BS3:

<select class="form-control input-lg"></select>
<select class="form-control"></select>
<select class="form-control input-sm"></select>

<input class="form-control input-lg">
<input class="form-control">
<input class="form-control input-sm">

Нет ввода-xs, хотя, поэтому вы должны сделать это самостоятельно, если хотите меньше.

.input-xs, select.input-xs {
  height: 20px;
  line-height: 20px;
}

Ответ 3

Это не окончательный ответ, но я хотел поделиться тем, что я получил до сих пор, для кого-то еще любопытного сделать это.

Как было предложено jackwanders, я пошел вперед и создал собственный класс CSS:

.select-mini {
  font-size: 11px;
  height: 20px;
  width: 100px;
}

Эти правила font-size и height более или менее задают размер окна выбора того же размера, что и мини-кнопка, но текст не совсем выравнивается одинаково (он слегка сдвигается). Обратите внимание, что вам нужно использовать height not line-height, чтобы переопределить правило height для отдельных элементов, которые Bootstrap устанавливает в другом месте. (Правило width - это просто изменить виджет и может быть любым, что вы хотите.)

Мой CSS-fu недостаточно хорош, чтобы быстро сделать внешний вид мини-выбора полностью совместимым с мини-кнопками, и из того, что я вижу, выберите, как бы странно, когда дело доходит до CSS, но, надеюсь, это будет полезно, поскольку начинайте с других. Между тем, по-прежнему открыты для лучших ответов!

Ответ 4

Для Bootstrap 4, чтобы установить height, мы можем использовать класс form-control-sm с form-control.

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

И для установки width из них мы должны использовать классы столбцов сетки, такие как .col-sm-*, .col-md-*, .col-lg-* и т.д.

Итак, поставьте код выбора в:

<div class="row">
  <div class="col-md-3">
    ... select tag code ...
  </div>
</div>

и он будет выглядеть следующим образом:

Вы можете вызвать последний элемент "mini" .

Ответ 5

На основе класса btn-xs я подготовил это:

.input-xs{
    height: 20px;
    line-height: 1.5;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 3px;
}

Обратите внимание, что ширина не ограничена!

Пожалуйста, проверьте эту скрипту, чтобы увидеть ее в действии.