Question

我想将标签尺寸设置为与屏幕尺寸相同。

f.e。用于大屏幕大标签，适用于小屏幕小标签。

Answer 1

在当前版本的Bootstrap，Bootstrap 3中，它们没有针对不同样式标签的单独类。

但是，您可以通过这种方式自定义引导类。在你的css文件中

.lb-sm {
  font-size: 12px;
}

.lb-md {
  font-size: 16px;
}

.lb-lg {
  font-size: 20px;
}

或者，您可以使用标题标记来更改大小。例如，这是一个中等大小的标签和一个小尺寸的标签

＆＃13;

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

＆＃13;

他们可能会在将来的Bootstrap版本中为标签添加大小类。

Answer 2

你必须做两件事来制作一个Bootstrap标签（或任何真正的东西）根据屏幕尺寸调整尺寸：

使用每个显示尺寸范围的媒体查询来调整CSS。
覆盖Bootstrap设置的CSS大小。您可以通过使CSS规则比Bootstrap更具体来实现此目的。默认情况下，Bootstrap设置.label { font-size: 75% }。因此，CSS规则中的任何额外选择器都会使其更加具体。

这是一个示例CSS列表，用于完成您的要求，使用Bootstrap中的默认4个大小：

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

以下是如何在HTML中使用它：

<!-- any ancestor could be set to autosized -->
<div class="autosized">
    ...
        ...
            <span class="label label-primary">Label 1</span>
</div>

Answer 3

如果有

<span class="label label-default">New</span>

只需添加style =“ font-size：XXpx;”，ej。

<span class="label label-default" style="font-size:15px;">New</span>

如何在Bootstrap中设置标签大小

3 个答案: