twitter-bootstrap 如何在 Bootstrap 中设置标签大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35025176/
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 set label size in Bootstrap
提问by Spontan23
I would like to set label size the same as screen size.
我想将标签大小设置为与屏幕大小相同。
f.e. for large screen large label, for small screen small label.
fe 用于大屏大标签，用于小屏小标签。
回答by Richard Hamilton
In Bootstrap 3 they do not have separate classes for different styles of labels.
在 Bootstrap 3 中，它们没有针对不同样式标签的单独类。
http://getbootstrap.com/components/
http://getbootstrap.com/components/
However, you can customize bootstrap classes that way. In your css file
但是，您可以通过这种方式自定义引导程序类。在你的 css 文件中
.lb-sm {
font-size: 12px;
}
.lb-md {
font-size: 16px;
}
.lb-lg {
font-size: 20px;
}
Alternatively, you can use header tags to change the sizes. For example, here is a medium sized label and a small-sized label
或者，您可以使用标题标签来更改大小。例如，这里有一个中号标签和一个小号标签
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Example heading <span class="label label-default">New</span></h3>
<h6>Example heading <span class="label label-default">New</span></h6>They might add size classes for labels in future Bootstrap versions.
他们可能会在未来的 Bootstrap 版本中为标签添加尺寸类。
回答by Kasey Speakman
You'll have to do 2 things to make a Bootstrap label (or anything really) adjust sizes based on screen size:
您必须做两件事才能使 Bootstrap 标签（或其他任何东西）根据屏幕尺寸调整尺寸：
- Use a media query per display size range to adjust the CSS.
- Override CSS sizing set by Bootstrap. You do this by making your CSS rules more specific than Bootstrap's. By default, Bootstrap sets
.label { font-size: 75% }. So any extra selector on your CSS rule will make it more specific.
- 使用每个显示尺寸范围的媒体查询来调整 CSS。
- 覆盖 Bootstrap 设置的 CSS 大小。您可以通过使 CSS 规则比 Bootstrap 规则更具体来实现这一点。默认情况下，Bootstrap 设置
.label { font-size: 75% }. 因此，CSS 规则上的任何额外选择器都会使其更加具体。
Here's an example CSS listing to accomplish what you are asking, using the default 4 sizes in Bootstrap:
这是使用 Bootstrap 中默认的 4 种尺寸来完成您所要求的示例 CSS 列表：
@media (max-width: 767) {
/* your custom css class on a parent will increase specificity */
/* so this rule will override Bootstrap's font size setting */
.autosized .label { font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 991px) {
.autosized .label { font-size: 16px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
.autosized .label { font-size: 18px; }
}
@media (min-width: 1200px) {
.autosized .label { font-size: 20px; }
}
Here is how it could be used in the HTML:
以下是它在 HTML 中的使用方式：
<!-- any ancestor could be set to autosized -->
<div class="autosized">
...
...
<span class="label label-primary">Label 1</span>
</div>
回答by Richard Yeber V.
if you have
如果你有
<span class="label label-default">New</span>
just add the style="font-size:XXpx;", ej.
只需添加 style="font-size:XXpx;", ej.
<span class="label label-default" style="font-size:15px;">New</span>
