在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中使用某些东西或覆盖默认样式来实现这一点？

我的问题类似于这个问题,但没有回答(至少没有回答原问题),而且Bootstrap在过去的7个月里有多次发布,我认为如果发生任何变化,我将再次提出要求.

Answer 1

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

当您需要在水平表单中的表单标签旁边放置常规静态文本时,请使用a上的.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并不涵盖所有可能性,您需要制作自己的风格.