Как установить размер метки в Bootstrap

Ответ 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>

Ответ 2

Вам нужно сделать 2 вещи, чтобы сделать ярлык Bootstrap (или что-то действительно) настроить размеры на основе размера экрана:

• Для настройки CSS используйте медиа-запрос для каждого диапазона размеров.
• Переопределить размер CSS, заданный Bootstrap. Вы делаете это, делая свои правила CSS более конкретными, чем Bootstrap. По умолчанию Bootstrap устанавливает .label { font-size: 75% }. Поэтому любой дополнительный селектор в правиле CSS сделает его более конкретным.

Вот пример списка CSS для выполнения того, что вы спрашиваете, используя размеры по умолчанию 4 в Bootstrap:

@media (max-width: 767) {
    /* your custom css class on a parent will increase specificity */
    /* so this rule will override Bootstrap 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>

Ответ 3

если у вас есть

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

просто добавьте style = "font-size: XXpx;", ej.

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