如何在 Bootstrap 2 表单中排列标签和只读字段 [英] How to line up labels and read-only fields in a Bootstrap 2 form

问题描述

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

<字段集><legend>示例</legend><div class="control-group"><label class="control-label">只读字段</label><div class="控件">Lorem Ipsum 然后是一些

</fieldset></表单>

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

解决方案

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

<span class="input-xlarge uneditable-input">Lorem Ipsum 然后是一些</span>

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

<块引用>

当您需要在表单标签旁边放置常规的静态文本时在水平表单中，在

上使用 .form-control-static 类

<p class="form-control-static">Lorem Ipsum 然后是一些</p>

In bootstrap 2, what's the recommended way of lining up labels and read-only text fields in a form. The following code sample creates misaligned fields:

<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>

Note that I can fix this up myself with custom CSS. That's not the issue. It just seems silly that this is not build-in so I feel like I must be overlooking something.

解决方案

You can use the uneditable input

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

EDIT:

As of bootstrap 3.0 a class has been added to handle this

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>

这篇关于如何在 Bootstrap 2 表单中排列标签和只读字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！