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

发布时间：2020-12-17 23:57:50 所属栏目：安全来源：网络整理

导读：在bootstrap 2中，建议在表单中排列标签和只读文本字段的方法。以下代码示例创建未对齐的字段： form class="form-horizontal" fieldset legendSample/legend div class="control-group" label class="control-label"Readonly Field/label div class="contro

在bootstrap 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。这不是问题。它只是似乎愚蠢，这不是内置的，所以我觉得我一定要俯瞰的东西。

解决方法

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

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

编辑：

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!