文本的位置影响引导标签＆＃39;身高，我该如何解决这个问题？

Question

所以我的页面格式如下：

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

如果#data标签中有文字，则#label和#data的高度会匹配。如果#data标签中没有文字，则该位置会发生偏差。见下面的照片。

注意投诉自然标签及其#data是如何倾斜的，对于Call Taker等也是如此。我已经验证并且所有#data标签都具有相同的css类：

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

如果#label中没有文字，那么#data为什么似乎底部对齐的任何想法？

Answer 1

你也有标签＃标签的CSS吗？您可能想要调查行高。

另外..诊断......“检查”倾斜的元素和不是的元素并进行比较，分享你在这里找到的东西。

Answer 2

检查inline forms上的Bootstrap文档。

虽然您可能没有根据我所看到的那样提供用户输入的“表单”，但内联表单在视觉上和功能上都与您的需求相同，但使用的不同标签和类比您的示例更多。

此外，您的HTML在语义上无效：label元素用于包装或引用input元素，而不是引用其他标签或显示数据。

我建议基于Bootstrap表单示例重写结构，因为它们在视觉上令人愉悦并且语义正确，同时易于根据您的特定需求进行修改。如果您担心应用中的input元素，因为用户可能认为他们需要实际输入内容，只需在其上打一个disabled="true"即可将其设为只读。

祝你好运！