twitter-bootstrap 标签和常规文本的 Bootstrap 对齐

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21736520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:01:28  来源:igfitidea点击:

Bootstrap alignment of label and regular text

htmlcssasp.net-mvctwitter-bootstrap

提问by FrankO

I have been trying to get the text to properly align vertically with no luck. Could I get some assistance?

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

Alignment Problem

对齐问题

Here is the underlying code:

这是底层代码:

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

回答by dward

Per Bootstrap docs, you can use <p class="form-control-static">[email protected]</p>to properly align static text in form groups.

根据Bootstrap 文档,您可以使用<p class="form-control-static">[email protected]</p>正确对齐表单组中的静态文本。

回答by Morpheus

You need to add display: inlineor display: inline-blockto your <div class="col-md-10">in order for vertical-alignto work.

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

Example

例子