如何在Bootstrap中设置标签大小

Question

我想将标签大小设置为与屏幕大小相同.

fe适用于大屏幕大标签,适用于小屏幕小标签.

Answer 1

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

http://getbootstrap.com/components/

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

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

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

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

或者,您可以使用标头标签更改大小.例如,这是一个中等大小的标签和一个小尺寸的标签

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

他们可能会在将来的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>