twitter-bootstrap – 水平表单 – 设置控件标签宽度的最佳方法

发布时间：2020-12-18 00:30:07 所属栏目：安全来源：网络整理

导读：我是twitter bootstrap的新手,我正在使用水平表单.我的代码是这样的： form class="form-horizontal" div class="control-group" label class="control-label" for="whatever"Whatever/label div class="controls" select id="whatever" name="whatever" opt

我是twitter bootstrap的新手,我正在使用水平表单.我的代码是这样的：

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="whatever">Whatever</label>
        <div class="controls">
            <select id="whatever" name="whatever">
                <option value="blah">Blah</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="another">Another</label>
        <div class="controls">
            <select id="something" name="something">
                <option value="MyEntry">MyEntry</option>
            </select>
        </div>
    </div>
    <button type="submit" class="btn">Search</button>
</form>

当我这样做时,表格看起来很好.唯一的问题是控件标签的长度太长,所以我在标签的左边有很多空格.有没有办法缩短标签,所以我没有得到那么多的空白？

谢谢.

解决方法

我通过创建几个额外的表单类来完成它,并根据我需要的大小使用它们.

这是我的css：

.form-small .control-label {
    width: 100px;
}

.form-small .controls {
    margin-left: 120px;
}

.form-medium .control-label {
    width: 180px;
}

.form-medium .controls {
    margin-left: 200px;
}

.form-xlarge .control-label {
    width: 240px;
}

.form-xlarge .controls {
    margin-left: 260px;
}

所以,如果我需要小标签：

<form class="form-horizontal form-small">

<!-- form body -->

</form>

当然,您可以根据需要设置自己的.control-label和.controls宽度.

希望有所帮助！

（编辑：李大同）

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