如何使用Bootstrap（或直接CSS）实现“迷你”选择样式？

Question

我正在使用Bootstrap的btn-mini类用于“迷你”按钮，我正在寻找类似于创建“迷你”选择元素的东西，其中选择按钮（即您单击以显示选项列表的部分） ，而不是选项列表本身）与迷你按钮的大小和样式相同。

当我将btn-mini类应用于select元素时，select按钮的字体样式与mini按钮的大小相同，但select按钮本身的大小与默认大小相同。

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

P.S。我正在开发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>，我还添加了一个插入符号。请参阅此fiddle。

Answer 3

对于 Bootstrap 4 ，要设置高度，我们可以将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>

要设置宽度，我们必须使用.col-sm-*，.col-md-*，.col-lg-*等网格列类。

所以把选择代码放在：

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

它看起来像这样：

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

Answer 4

这不是最后的答案，但我想分享我迄今为止对其他任何好奇的事情所做的事情。

正如jackwanders所建议的那样，我已经开始创建一个自定义的CSS类：

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

此font-size和height规则或多或少地使选择框与迷你按钮的大小相同，但文本的排列方式并不完全相同（稍微向上移动） ）。请注意，您需要使用height而不是line-height来覆盖Bootstrap在其他地方设置的select元素的height规则。 （width规则只是为了更改窗口小部件，可以是您想要的任何内容。）

我的CSS-fu不足以快速使迷你选择外观与迷你按钮完全一致，而且从我所看到的选择奇怪的是当涉及到CSS时，但是希望这将有助于作为一个开始他人。同时，仍然可以获得更好的答案！

Answer 5

根据btn-xs课程，我已经准备好了这个：

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

请注意，宽度不受限制！

请检查this fiddle以查看其实际效果。