Wie man Etikettengröße in Bootstrap einstellt

Ich würde gerne set label Größe die gleiche wie die Bildschirmgröße.

f.e. für große Bildschirm-großes label, für das kleine Bildschirm-kleines label.

InformationsquelleAutor der Frage Spontan23 | 2016-01-26

  1. 3

    Müssen Sie tun 2 Dinge, um eine Bootstrap-label (oder eigentlich alles) stellen Größen basierend auf der Bildschirmgröße:

    • Verwenden Sie ein media-query pro Anzeige Größenbereich anpassen der CSS.
    • Überschreiben, CSS sizing set von Bootstrap. Sie tun dies, indem Sie Ihre CSS-Regeln, die spezifischer als Bootstrap. Standardmäßig Bootstrap setzt .label { font-size: 75% }. So dass jeder zusätzliche Selektor der CSS-Regel wird es spezifischer.

    Hier ist ein Beispiel-CSS-listing zu erreichen, was, die Sie Fragen, die mithilfe der Standard-4 Größen in Bootstrap:

    @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 verwendet werden könnte, in der HTML:

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

    InformationsquelleAutor der Antwort Kasey Speakman

Schreibe einen Kommentar