如何使用 Bootstrap（或直接 CSS）实现“迷你”选择样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12149164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to achieve a "mini" select style using Bootstrap (or straight CSS)?
提问by Ghopper21
I'm using Bootstrap's btn-miniclass for "mini" buttons and am looking for something analogous to create a "mini" select element, where the select button (i.e. the part you click to show the list of options, not the list of options itself) is the same size and style as a mini button.
我正在使用 Bootstrap 的btn-mini“迷你”按钮类，并且正在寻找类似于创建“迷你”选择元素的东西，其中选择按钮（即您单击以显示选项列表的部分，而不是选项列表本身）与迷你按钮的大小和样式相同。
When I apply the btn-miniclass to a select element, the font style of the select button is the same size as a mini button, but the size of the select button itself is unchanged from the default size.
当我将该btn-mini类应用于选择元素时，选择按钮的字体样式与迷你按钮的大小相同，但选择按钮本身的大小与默认大小没有变化。
Is there a different Bootstrap class I should use? Or another way to do it?
我应该使用不同的 Bootstrap 类吗？或者另一种方法来做到这一点？
P.S. I'm working on OS X Chrome, but naturally hope there is a cross-browser compatible solution.
PS 我正在使用 OS X Chrome，但自然希望有一个跨浏览器兼容的解决方案。
采纳答案by Pavlo
HTML
HTML
<select class="btn btn-mini">
<!-- options -->
</select>
<span class="caret"></span>
CSS
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;
}
The last 2 rules are optional, it will make <select>look like <button>, I've also added a caret to it. See this fiddle.
最后 2 条规则是可选的，它<select>看起来像<button>，我还添加了一个插入符号。看到这个小提琴。
回答by Will Stern
Just in case any Bootstrap 3 users come across this old question, here's the BS3 way:
以防万一任何 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">
There is no input-xs, though, so you'd have to make that yourself if you wanted smaller.
但是，没有 input-xs，因此如果您想要更小，则必须自己制作。
.input-xs, select.input-xs {
height: 20px;
line-height: 20px;
}
回答by Rajkaran Mishra
For Bootstrap 4, to set heightwe can use form-control-smclass with form-control.
对于Bootstrap 4，我们可以使用class来设置高度。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>
And to set widthof these we have to use grid column classes like .col-sm-*, .col-md-*, .col-lg-*, etc.
并设置宽度的这些问题，我们必须使用网格列类，如.col-sm-*，.col-md-*，.col-lg-*，等。
So put the select code in:
所以把选择代码放在：
<div class="row">
<div class="col-md-3">
... select tag code ...
</div>
</div>
and it will look like this:
它看起来像这样：
You can call the last one a "mini"select element.
您可以将最后一个称为“迷你”选择元素。
回答by Ghopper21
This is not a final answer, but I wanted to share what I've gotten so far for anyone else curious about doing this.
这不是最终答案，但我想与其他对此感到好奇的人分享我到目前为止所获得的信息。
As suggested by Hymanwanders, I've gone ahead and created a custom CSS class:
正如 Hymanwanders 所建议的，我已经创建了一个自定义 CSS 类：
.select-mini {
font-size: 11px;
height: 20px;
width: 100px;
}
This font-sizeand heightrules more or less get the select box to be the same size as a mini button, but the text isn't quite aligned in the same way (it's slightly shifted up). Note you need to use heightnot line-heightto override a heightrule for select elements that Bootstrap sets elsewhere. (The widthrule is just to change the widget and can be whatever you want.)
这font-size和height规则或多或少使选择框与迷你按钮的大小相同，但文本并没有以相同的方式完全对齐（稍微向上移动）。请注意，您需要使用heightnotline-height来覆盖heightBootstrap 在别处设置的选择元素的规则。（width规则只是改变小部件，可以是你想要的任何东西。）
My CSS-fu isn't good enough to quickly make the mini select look fully consistent with the mini buttons, and from what I can see select's behave oddly when it comes to CSS anyhow, but hopefully this will be helpful as a start to others. Meanwhile, still open to better answers!
我的 CSS-fu 不够好，无法快速使迷你选择看起来与迷你按钮完全一致，而且从我所看到的，无论如何，当涉及到 CSS 时，选择的行为很奇怪，但希望这对其他人有所帮助. 同时，仍然对更好的答案持开放态度！
回答by 1_bug
Based on btn-xsclass I've prepared this:
根据btn-xs我准备的课程：
.input-xs{
height: 20px;
line-height: 1.5;
font-size: 12px;
padding: 1px 5px;
border-radius: 3px;
}
Note that width is not limited!
注意宽度没有限制！
Please check this fiddleto see it in action.
请检查此小提琴以查看它的实际效果。
回答by EminST
Pavlo answer is better. But when mouse cursor is over caret click doenst` work. Just one thing must be added into caret class to fix it:
帕夫洛的回答更好。但是当鼠标光标在插入符号上时，单击 doenst` 工作。只需将一件事添加到插入符类中即可修复它：
select.btn-mini + .caret {
margin-left: -14px;
margin-top: 19px;
pointer-events: none;
}