http://twitter.github.com/bootstrap/base-css.html#forms
我有一个简单的水平表单,例如带有标签和输入文本字段的示例。如何使所有标签字体大小:24px 和所有输入正确高度等。我还需要 140px 宽度的硬编码边距来增加标签不换行。也就是说,我正在寻找最佳实践方式来表达:更大!
http://twitter.github.com/bootstrap/base-css.html#forms
我有一个简单的水平表单,例如带有标签和输入文本字段的示例。如何使所有标签字体大小:24px 和所有输入正确高度等。我还需要 140px 宽度的硬编码边距来增加标签不换行。也就是说,我正在寻找最佳实践方式来表达:更大!
为什么不将表单标签设置为 24px 并将表单输入高度设置为任何匹配项?
form label {
font-size: 24px;
}
form input, form textarea, form select {
margin-left: 200px;
}
只需在 bootstrap.css 加载后将此代码放在某处,它就会覆盖它们的默认值。您可能还想为输入类型添加选择器,以便它不做按钮。
假设您有正确的设置,请创建一个“文件名”.css.scss 并使用 compass 来查看文件(这会将其转换为等效的 css)。
然后在您的_ _.css.scss 文件中,执行以下操作:
1)
$baseFontSize: 24px; @import "bootstrap";
这会更改所有字体的大小,但根据您的问题,我认为这就是您所关心的。
2)不确定输入正确高度是什么意思。但是您可以使用 mixin .box-sizing() (http://twitter.github.com/bootstrap/less.html) 或设置输入元素的底部高度以匹配您的标签,如下所示:
input{position: relative; bottom: 5px;}
3) 为了使标签不换行,请将您的表单放在一个带有 class = "fluid-container spanX" 的 div 中,其中 X 是您需要的任何数量的网格。
Compass 将生成一个 css 文件,您可以从中复制语法并粘贴到您的项目中。
希望这可以帮助