twitter-bootstrap - 如何在 Bootstrap 2 表单中排列标签和只读字段

Question

在引导程序 2 中，在表单中排列标签和只读文本字段的推荐方法是什么？以下代码示例创建未对齐的字段：

<form class="form-horizontal">
    <fieldset>
        <legend>Sample</legend>    
        <div class="control-group">
            <label class="control-label">Readonly Field</label>
            <div class="controls">
                Lorem Ipsum and then some
            </div>
        </div>
    </fieldset>
</form>

请注意，我可以使用自定义 CSS 自己解决此问题。那不是问题。这不是内置的，这似乎很愚蠢，所以我觉得我必须忽略一些东西。

Answer 1

您可以使用不可编辑的输入

<span class="input-xlarge uneditable-input">Lorem Ipsum and then some</span>

编辑：

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

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

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

Answer 2

有一个黑客。您可以将 <label> 与“复选框”类一起使用

在你的情况下：

<div class="控件">
 <label class="checkbox">
     Lorem Ipsum and then some
 </label>
</div>

Answer 3

As of bootstrap 4.0 the .form-control-static class has been replaced by the .form-control-plaintext class.