css - 如何使用 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">

但是，没有 input-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 ，我们可以使用class with来设置高度。form-control-smform-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规则或多或少地使选择框与迷你按钮的大小相同，但文本并没有以相同的方式完全对齐（它略微向上移动）。请注意，您需要使用heightnotline-height覆盖heightBootstrap 在其他地方设置的选择元素的规则。（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;
}

请注意，宽度不受限制！

请检查此小提琴以查看它的实际效果。

Answer 6

巴甫洛的回答更好。但是当鼠标光标位于插入符号上时，单击不会起作用。只需将一件事添加到插入符类中即可修复它：

select.btn-mini + .caret {
    margin-left: -14px;
    margin-top: 19px;
	pointer-events: none;
}