twitter-bootstrap 在 Twitter Bootstrap 2.0 中排列标签和只读文本

Line up labels and read only text in Twitter Bootstrap 2.0

提问by pwaring

I have a form with a mixture of editable and read-only fields which I want to style using Bootstrap. The editable fields are aligned correctly, but the read-only fields are not, as shown in this screenshot:

我有一个混合了可编辑和只读字段的表单，我想使用 Bootstrap 设置样式。可编辑字段已正确对齐，但只读字段未正确对齐，如下面的屏幕截图所示：

The HTML I'm using is:

我使用的 HTML 是：

<form class="form-horizontal">
<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls">
    John Smith
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="date_of_birth">Date of Birth</label>
  <div class="controls">
    <input name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
    <span class="help-inline">dd/mm/yyyy</span>
  </div>
</div>
</form>

I don't want to show a read-only input for the fields which can't be edited, as users get confused/frustrated when they can't click in the box, and these are fields which can never be edited so it doesn't really make sense to show them as disabled/read-only. I just want the text to be displayed and aligned correctly with the label. Is there a way I can do this, either by using something in Bootstrap or overriding the default styles?

我不想为无法编辑的字段显示只读输入，因为用户在无法单击框时会感到困惑/沮丧，而这些字段永远无法编辑，因此它不会将它们显示为禁用/只读真的没有意义。我只想显示文本并与标签正确对齐。有没有办法做到这一点，要么通过在 Bootstrap 中使用某些东西，要么覆盖默认样式？

My question is similar to this one, which wasn't answered (at least not an answer to the original question), and as Bootstrap has had multiple releases in the past 7 months I thought it would be worth asking again in case anything had changed.

我的问题与这个类似，没有得到回答（至少不是对原始问题的回答），并且由于 Bootstrap 在过去 7 个月内发布了多个版本，我认为如果发生任何变化，我认为值得再次询问.

采纳答案by Simon Cunningham

Create your own style and apply it as below -

创建您自己的样式并将其应用如下 -

.controls.readonly
{
  padding-top: 5px;
}

<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls readonly">
    John Smith
  </div>
</div>

Bootstrap doesn't cover every eventuality and you will need to make your own styles.

Bootstrap 不能涵盖所有可能发生的情况，您需要创建自己的样式。

回答by chris vdp

As of bootstrap 3.0 a class has been added to handle this

从 bootstrap 3.0 开始，已经添加了一个类来处理这个问题

When you need to place regular, static text next to a form label within a horizontal form, use the .form-control-staticclass on a <p>

当您需要在水平表单中的表单标签旁边放置常规的静态文本时，请.form-control-static在<p>

<div class="controls">
  <p class="form-control-static">Lorem Ipsum and then some</p>
</div>

回答by d512

If you're using Bootstrap 3, definitely use the form-control-staticclass. If that's not an option, you could use the control-labelclass and have another class that removes the bold font weight.

如果您使用的是 Bootstrap 3，请务必使用form-control-static该类。如果这不是一个选项，您可以使用control-label该类并使用另一个去除粗体字重的类。

in your html:

在你的 html 中：

<div class="control-group">
  <label class="control-label">Name</label>
  <label class="control-label static-text">
    John Smith
  </label>
</div>

in your css:

在你的 css 中：

.static-text {
    font-weight: normal;
}

Just make sure you list the static-textclass aftercontrol-labelon the classattribute in your html. That is so that it will override the font-weightestablished by control-label.

只需确保在 html 中的属性之后列出static-text类。这样它就会覆盖由建立的。control-labelclassfont-weightcontrol-label

In your case you might also want to adjust the font size.

在您的情况下，您可能还想调整字体大小。

Of course, if bootstrap ever changes the CSS properties on the control-labelclass, you might have to go back and adjust your static-textclass.

当然，如果 bootstrap 改变了control-label类的 CSS 属性，你可能不得不回去调整你的static-text类。

回答by Nino van Hooff

Like @pwaring said, for me more styling was needed as well:

就像@pwaring 说的，对我来说还需要更多的样式：

.controls.readonly{
 font-size: 14px;
 line-height: 20px;
 padding-top: 5px;
}

<div class="controls readonly">
    Lorem Ipsum and then some
  </div>

回答by Sincere

To add to Simon's post, I added display: inline-block;to the CSS.

为了添加到 Simon 的帖子，我添加display: inline-block;到 CSS。

This is to match the display of the label and the text.

这是为了匹配标签和文本的显示。

回答by IvanD

This is using chris vdp's answer and providing full HTML for people that did not find chris's answer blindingly obvious (like me and Eduardo in Norway).

这是使用 chris vdp 的答案，并为那些没有发现 chris 答案非常明显的人（如我和挪威的 Eduardo）提供完整的 HTML。

I am potentially showing more code than needed, but I found that the above solutions were not at the 'copy-paste level' which I need most of the time. :-) I wanted to provide you with something I know works and can by pasted into your code in a blindingly obvious fashion. Just plunk this structure anywhere in the of your HTML.

我可能会显示比需要更多的代码，但我发现上述解决方案不在我大部分时间需要的“复制粘贴级别”。:-) 我想为您提供一些我知道有效的东西，并且可以以一种非常明显的方式粘贴到您的代码中。只需在 HTML 的任何位置插入此结构即可。

Note: This works with and requires Bootstrap 3.

注意：这适用于并需要 Bootstrap 3。

<form class="form-horizontal" role="form">
    <div class="control-group">
        <label for="personName" class="control-label col-sm-2">Name</label>
        <div class="controls col-sm-10">
            <p id="personName" class="form-control-static">John Smith</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label col-sm-2" for="date_of_birth">Date of Birth</label>
        <div class="controls">
            <input class="col-sm-3" name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
            <span class="help-inline col-sm-3">dd/mm/yyyy</span>
        </div>
    </div>
</form>

回答by 000

You can extend the controlsclass:

您可以扩展controls该类：

<style>
.controls.aligncorrect{
  padding-top: 5px;
}
</style>

and then using it like this:

然后像这样使用它：

<div class="controls aligncorrect" style="padding-top:5px;">
    John Smith
  </div>