在Twitter Bootstrap 2.0中排列标签和只读文本
我使用Bootstrap来创build一个可编辑和只读字段混合的表单。 可编辑字段正确alignment，但只读字段不正确，如以下屏幕截图所示：
我使用的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> 我不想为无法编辑的字段显示只读input，因为当用户不能点击框时，用户会感到困惑/沮丧，而这些字段是永远不能编辑的，所以它不会将它们显示为禁用/只读是没有任何意义的。 我只是希望文本显示正确与标签alignment。 有没有办法我可以做到这一点，无论是通过使用Bootstrap中的东西或覆盖默认样式？
我的问题与这个问题类似，没有回答（至less不是对原始问题的回答），而Bootstrap在过去7个月里已经有多个版本，我认为如果有任何改变， 。
创build你自己的风格，并将其应用如下 –
.controls.readonly { padding-top: 5px; } <div class="control-group"> <label class="control-label">Name</label> <div class="controls readonly"> John Smith </div> </div>
Bootstrap不会涵盖所有可能的情况，您需要制作自己的风格。
至于bootstrap 3.0，已经添加了一个类来处理这个问题
当您需要将常规静态文本放在水平表单中的表单标签旁时，请在
<p>使用.form-control-static类。
<div class="controls"> <p class="form-control-static">Lorem Ipsum and then some</p> </div>
就像@pwaring说的那样，对我来说还需要更多的造型：
.controls.readonly{ font-size: 14px; line-height: 20px; padding-top: 5px; } <div class="controls readonly"> Lorem Ipsum and then some </div>
要添加到西蒙的文章，我添加了display: inline-block; 到CSS。
这是为了匹配标签和文本的显示。
如果你使用的是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的class属性中的control-label 之后列出static-text类。 这样就可以覆盖control-labelbuild立的font-weight 。
在你的情况下，你可能也想调整字体大小。
当然，如果引导程序改变了control-label类的CSS属性，你可能不得不回头调整你的static-text类。
这是使用克里斯vdp的答案，并提供完整的HTML没有find克里斯的回答盲目明显的人（如我和挪威的爱德华多）。
我可能会显示比需要更多的代码，但是我发现上面的解决scheme并不处于我大多数时间需要的“复制粘贴级别”。 :-)我想给你提供一些我知道的东西，并且可以通过一种非常明显的方式粘贴到你的代码中。 只需在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>
您可以扩展controls类：
<style> .controls.aligncorrect{ padding-top: 5px; } </style>
然后像这样使用它：
<div class="controls aligncorrect" style="padding-top:5px;"> John Smith </div>
