So legen Sie die Etikettengröße im Bootstrap fest

Question

Ich möchte die Etikettengröße der Bildschirmgröße anpassen.

f.e. für Großbild Großformat, für Kleinbild Kleinformat.

Answer 1

In der aktuellen Version von Bootstrap, Bootstrap 3, haben sie keine separaten Klassen für verschiedene Etikettenstile.

http://getbootstrap.com/components/

Sie können jedoch Bootstrap-Klassen anpassen, die Art und Weise. In Ihrer CSS-Datei

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

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

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

Alternativ können Sie Header-Tags verwenden, um die Größen zu ändern. Zum Beispiel, hier ist ein mittelgroßes Etikett und eine kleine 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>

Sie könnten Größenklassen für Etiketten in Zukunft Bootstrap-Versionen hinzufügen.

Answer 2

Sie müssen zwei Dinge tun, um eine Bootstrap-Label (oder irgendetwas wirklich) anpassen Größen auf Bildschirmgröße basiert zu machen:

• Verwenden Sie eine Medienabfrage pro Anzeigegröße Bereich der CSS anzupassen.
• CSS-Größeneinstellung durch Bootstrap überschreiben. Sie tun dies, indem Sie Ihre CSS-Regeln spezifischer als Bootstraps machen. Standardmäßig legt Bootstrap .label { font-size: 75% } fest. Jeder zusätzliche Selektor in Ihrer CSS-Regel macht das genauer.

Hier ist ein CSS-Beispiel zu erreichen, die Auflistung, was Sie fordern, den Standard 4 Größen in Bootstrap mit:

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

Hier ist, wie es in der HTML verwendet werden könnten:

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