标签和常规文本的引导对齐答案

【问题标题】：Bootstrap alignment of label and regular text标签和常规文本的引导对齐
【发布时间】：2014-03-11 06:51:00
【问题描述】：

我一直试图让文本正确垂直对齐，但没有运气。我能得到一些帮助吗？

下面是底层代码：

    <div class="form-group">
        <label class="control-label col-md-2">Permalink</label>
        <div class="col-md-10">
            http://www.somedomain.com/cart/@Model.Offer.Id
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Offer.DateCreated, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DisplayFor(model => model.Offer.DateCreated)
            @Html.ValidationMessageFor(model => model.Offer.DateCreated)
        </div>
    </div>

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap

【解决方案1】：

根据Bootstrap docs，您可以使用<p class="form-control-static">email@example.com</p> 正确对齐表单组中的静态文本。

【讨论】：

效果很好。我把它放在包含 div 中！
谢谢！

【解决方案2】：

您需要将display: inline 或display: inline-block 添加到您的<div class="col-md-10"> 才能使vertical-align 工作。

Example

【讨论】：

这没有帮助。我选择了上面完美的答案。
另一个示例正在运行，因为p 是内联元素。无论如何，我同意你的观点，其他例子更好，因为你不需要额外的样式。
是的。我没有使用
标签。我将“form-control-static”类放入现有的

中，使其工作。另外，就像你说的，它也很干净。