如何使用Bootstrap(或直接CSS)实现"迷你"选择样式？

Question

我正在使用Bootstrap的btn-mini"迷你"按钮类,我正在寻找类似于创建"迷你"选择元素的东西,其中选择按钮(即您单击以显示选项列表的部分,而不是选项列表本身)与迷你按钮的尺寸和样式相同.

当我将btn-mini类应用于选择元素时,选择按钮的字体样式与迷你按钮的大小相同,但是选择按钮本身的大小与默认大小相同.

我应该使用不同的Bootstrap类吗？还是另一种方式呢？

PS我正在开发OS X Chrome,但自然希望有一个跨浏览器兼容的解决方案.

Answer 1

如果任何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;
}

Answer 2

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

最后两个规则是可选的,它会<select>看起来像<button>,我还添加了一个插入符号.看到这个小提琴.

Answer 3

对于Bootstrap 4，要设置高度，我们可以将form-control-smclass与配合使用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>

并设置宽度的这些问题，我们必须使用网格列类，如.col-sm-*，.col-md-*，.col-lg-*，等。

因此，将选择代码放入：

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

它看起来像这样：

您可以将最后一个称为“迷你”选择元素。