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

Question

我有一个包含可编辑和只读字段的表单，我想使用Bootstrap设置样式。可编辑字段已正确对齐，但只读字段不正确，如此屏幕截图所示：

我正在使用的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>

我不想为无法编辑的字段显示只读输入，因为当用户无法在框中单击时会感到困惑/沮丧，这些字段永远无法编辑所以将它们显示为禁用/只读是没有意义的。我只想要显示文本并与标签正确对齐。有没有办法可以通过在Bootstrap中使用某些内容或覆盖默认样式来实现此目的？

我的问题类似于this one，但没有得到解答（至少不是对原始问题的答案），而且Bootstrap在过去7个月内有过多次发布，我认为值得一提如果发生任何变化，请再次。

Answer 1

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

  

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

上的<p>类

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

Answer 2

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

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

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

Bootstrap并未涵盖所有可能性，您需要制作自己的风格。

Answer 3

就像@pwaring说的那样，对我来说也需要更多造型：

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

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

Answer 4

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

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

Answer 5

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

你的HTML中的

：

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

在你的css中：

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

请确保在html中的static-text属性上 control-label后列出class类。这样它就会覆盖font-weight建立的control-label。

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

当然，如果bootstrap改变了control-label类的CSS属性，您可能需要返回并调整static-text类。

Answer 6

这是使用chris vdp的答案，并为那些没有找到克里斯答案的人提供完整的HTML（如我和挪威的Eduardo）。

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

注意：这适用于并且需要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>

Answer 7

您可以扩展controls类：

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

然后像这样使用它：

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