Die Position des Textes beeinflusst die Höhe des Bootstrap Labels, wie kann ich das beheben?

Question

Also meine Seite als solche formatiert:

<div class="col-xs-12 col-md-6"> 
    <strong><label id="label">LABEL GOES HERE</label></strong> 
    <label id="data">DATA GOES HERE</label> 
</div> 

Wenn Text in der #data Etikett ist dann die Höhen der #label und die #data übereinstimmen. Wenn in der #data Beschriftung kein Text vorhanden ist, ist die Position verzerrt. Siehe Foto unten.

Beachten Sie, wie die Beschwerde Nature Label und seine #data verzerrt sind, und das gleiche gilt für Calltaker etc. etc. Ich habe überprüft und alle der #data Etiketten haben die gleiche CSS-Klasse:

.data { 
    border: 1px solid #464545; 
    margin: 0; 
    padding-bottom: 0px; 
    padding-left: 3px; 
    padding-right: 0px; 
    padding-top: 4px; 
    border-radius: 0px; 
    height: 28px; 
} 

Irgendwelche Gedanken, warum die #label bottom-aligned scheint, wenn es keinen Text in der #data gibt?

Answer 1

Überprüfen Sie die Bootstrap-Dokumentation unter inline forms.

Während Sie nicht eine "Form" in dem Sinne machen, dass Sie keine Benutzereingaben nehmen, so weit ich sehen kann, sind Inline-Formulare optisch und funktionell Ihren Anforderungen gleich, verwenden jedoch andere Tags und Klassen als Ihre Beispiel.

Auch Ihr HTML ist semantisch ungültig: label Elemente sind gemeint, um input Elemente zu umhüllen oder zu referenzieren, um andere Bezeichnungen oder Anzeigedaten nicht zu verweisen.

Ich würde vorschlagen, die Struktur basierend auf Bootstrap-Formularbeispielen neu zu schreiben, da sie sowohl visuell ansprechend als auch semantisch korrekt sind, während sie einfach an Ihre spezifischen Bedürfnisse anzupassen sind. Wenn Sie sich über input Elemente in Ihrer App Sorgen machen, weil die Benutzer denken, dass sie tatsächlich etwas eingeben müssen, drücken Sie einfach eine disabled="true" auf sie, um sie schreibgeschützt zu machen.

Viel Glück!

Answer 2

Haben Sie auch das CSS für Label # Label? Vielleicht möchten Sie die Zeilenhöhe untersuchen.

Auch .. zu diagnostizieren ... "inspizieren" die Elemente, die verzerrt sind und die Elemente, die nicht sind und vergleichen, teilen, was Sie hier auch finden.